Czy mogę skierować: przed lub: po pseudoelementie z kombinatorem rodzeństwa?

Question

Czy istnieje powód, dla którego ten CSS nie działa?

http://jsfiddle.net/6v5BZ/

a[href^="http"]:after { 
    content:""; 
    width:10px; 
    height:10px; 
    display:inline-block; 
    background-color:red; 
} 

a[href^="http"] img ~ :after { 
    display:none; 
} 

.. na tej HTML?

<a href="http://google.com">Test</a> 
<a href="http://google.com"> 
    <img src="https://www.google.com/logos/classicplus.png"> 
</a> 

Chodzi o to, aby mieć pseudoelement na pasujących znacznikach kotwicy. Ale nie chcę, aby dotyczyła znaczników zakotwiczających, które zawijają obraz. A ponieważ nie mogę celować w kotwice za pomocą czegoś takiego jak a < img, pomyślałem, że być może uda mi się zaatakować: po pseudoelementie przez znalezienie obrazu, który jest rodzeństwem.

Każdy wgląd byłby bardzo doceniony.

Answer 1

Nie można zaatakować: po tym, jak treść nie jest renderowana w DOM i nie manipuluje nią - aby to działało, DOM musiałby zostać ponownie renderowany, a CSS nie może nim manipulować w ten sposób.

Sprawdź specyfikację dla dokładnego zrozumienia: http://www.w3.org/TR/CSS2/generate.html#propdef-content

Wygenerowane zawartość nie zmienia drzewa dokumentu. W szczególności, kod ten nie jest przesyłany z powrotem do procesora języka dokumentu (np. Do reparacji ).

Proponuję użyć JavaScript, aby wykonać pracę za Ciebie.

Answer 2

Nie można użyć kombinatora, aby celować w pseudoelement względem elementów innych niż jego element generujący.

To dlatego, że są to pseudoelementy, a nie rzeczywiste elementy, a kombinatory działają tylko poprzez ustanowienie relacji między rzeczywistymi elementami. Z drugiej strony pseudoelement można zastosować tylko do podmiotu selektora (prawego selektora złożonego), a dzieje się to tylko po dopasowaniu przetwarzanym na elementach rzeczywistych. Innymi słowy, dopasowywanie odbywa się najpierw tak, jakby nie było pseudoelementu, a następnie pseudoelement, jeśli jest wskazany w selektorze, jest stosowany do każdego dopasowania.

W kodzie następujący selektor:

a[href^="http"] img ~ :after 

faktycznie nie szukać :after pseudo-element, który przychodzi po img w a, choć wydaje się, że sposób, jak oba są renderowane jako dzieci elementu a.

Może być zapisane na następujące:

a[href^="http"] img ~ *:after 

Wskazówki selektor *, który jest domyślnie. Podobnie do tego, jak można ominąć * przed innymi prostymi selektorami, aby był dorozumiany, pomijanie * z pseudoelementu również sprawia, że ​​domyślnie jest tam. Szczegółowe informacje można znaleźć w spec.

Teraz, chociaż wydaje się, *:after nadal powinien dopasować a:after (od a pasowałby *), to nadal nie działa w ten sposób. Jeśli usuniesz ten pseudo-element :after z selektora:

a[href^="http"] img ~ * 

Zauważysz, że znaczenie zmian selektora całości:

wybrać dowolny element
który pojawia się jako poniższej rodzeństwa jest to potomek a (którego href zaczyna się od "http").

Od img jest ostatnim dzieckiem elementu a w HTML nie istnieją następujące rodzeństwo do meczu, więc nie ma :after pseudo-elementy mogą być generowane.

W przypadku pseudo-elementu :before lub :after, można by pomyśleć dopasowanie elementu generującego względem pseudo-element, aby „rodzeństwo” pseudo-element, ale jak OP słusznie wskazał, there is no parent selector, więc także nie ma szczęścia.