Могу ли я выбрать псевдоэлемент: before или: after с помощью братского комбинатора? - PullRequest
Новая
       20

Могу ли я выбрать псевдоэлемент: before или: after с помощью братского комбинатора?

27 голосов
/ 12 октября 2011

Есть ли причина, по которой этот CSS не работает?

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;
}

.. в этом HTML? 

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

Идеядолжен иметь псевдоэлемент для сопоставления тегов привязки.Но я не хочу применять его к тегам привязки, которые обертывают изображение.И так как я не могу нацелить якоря, используя что-то вроде a < img, я подумал, что, возможно, я мог бы нацелиться на: после псевдоэлемента, найдя изображение, которое является родным братом..

Ответы [ 2 ]

18 голосов
/ 12 октября 2011

Вы не можете настроить таргетинг: после этого его контент не отображается в DOM, и он не манипулирует им - для того, чтобы это работало, DOM должен быть повторно визуализирован, а CSS не может так манипулировать.

Проверьте спецификацию для детального понимания: http://www.w3.org/TR/CSS2/generate.html#propdef-content

Созданный контент не изменяет дерево документа.В частности, он не передается обратно процессору языка документов (например, для повторного анализа).

Я предлагаю вам использовать JavaScript, чтобы выполнить эту работу за вас.

14 голосов
/ 13 октября 2011

Вы не можете использовать комбинатор для нацеливания псевдоэлемента относительно элементов, отличных от его генерирующего элемента.

Это потому, что они псевдоэлементы , а не фактические элементы, икомбинаторы работают только путем установления отношений между фактическими элементами.Псевдоэлемент, с другой стороны, может быть применен только к объекту селектора (самый правый составной селектор), и это происходит только после того, как сопоставление обработано на реальных элементах.Другими словами, сопоставление сначала выполняется так, как если бы псевдоэлемента там не было, затем псевдоэлемент, если он указан в селекторе, применяется к каждому совпадению.

В вашем коде следующееселектор: 

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

На самом деле не ищет псевдоэлемент :after, который следует после img в a, даже если он выглядит так, поскольку оба они отображаются как дочерние элементыa элемент.

Его можно переписать следующим образом: 

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

Обратите внимание на селектор *, который подразумевается.Подобно тому, как вы можете опустить * до того, как будут подразумеваться любые другие простые селекторы, пропуск * из псевдоэлемента также подразумевает его присутствие там.См. spec для деталей.

Теперь, даже если кажется, что *:after должен все равно соответствовать a:after (так как a будет соответствовать *), он все еще неработать таким образом.Если вы удалите псевдоэлемент :after из селектора: 

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

Вы заметите, что значение селектора полностью меняется:

Выберите любой элемент
который выглядит как следующий брат или сестра img
, который является потомком a (чей href начинается с "http").

Так как imgявляется последним дочерним элементом элемента a в вашем HTML, нет следующих одноуровневых элементов для сопоставления, и поэтому псевдоэлементы :after не могут быть сгенерированы.

В случае :before или:after псевдоэлемент, можно подумать о сопоставлении порождающего элемента псевдоэлемента относительно «родственного элемента» псевдоэлемента, но, как правильно указал OP, родительского селектора нет, поэтомуим тоже не повезло.

...