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

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

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="#" onclick="location.href='http://google.com'; return false;">Test</a>
<a href="#" onclick="location.href='http://google.com'; return false;">
    <img src="https://www.google.com/logos/classicplus.png">
</a>

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

Любое понимание будет принята с благодарностью.

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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 можно подумать о совпадении элемента генерации псевдоэлемента относительно псевдоэлементного "sibling", но, как правильно указал OP, нет родительского селектора, так что им тоже не повезло.