CSS: lang pseudo class vs attribute selector

Я хотел бы написать правило css, которое будет использовать разные кавычки для кавычек на разных языках. Я знаю, что lang является атрибутом HTML, поэтому почему я не могу использовать селектор атрибутов css ниже? Должен ли код ниже не нацеливаться на все q и blockqutote элементы, которые находятся внутри элемента с атрибутом lang, который имеет значение sk?CSS: lang pseudo class vs attribute selector

[lang=sk] q, 
[lang=sk] blockquote { 
    quotes: "-" "-"; 
}

Я знаю, что следующий код работает, но я не совсем понимаю, почему приведенный выше код не является. В этом примере вместо этого используется псевдокласс, что для меня не очень интуитивно. Причина, вероятно, заключается в том, что lang является атрибутом html в то же время, что для меня немного сбивает с толку.

:lang(sk) q, 
:lang(sk) blockquote { 
    quotes: "-" "-"; 
}

Заранее благодарим за это.

источник

2016-02-28 Peter

вы могли бы привести пример, когда код с использованием атрибутов селекторов терпит неудачу? – Danield

О, теперь все хорошо. Я не знаю, что пошло не так, мой код, вероятно, почему-то не спасся. Вероятно, этот вопрос нужно удалить, поскольку код выше работает отлично. – Peter

:lang(x) ближе к [lang|=x], чем [lang=x], но все же они отличаются, потому что :lang относится к содержанию, а не элемента. Ясный способ способ описать разницу это на примере в CSS spec:

Обратите внимание на разницу между [Lang | = хх] и: Ланг (хх). В этом примере HTML только BODY соответствует [lang | = fr] (поскольку у него есть атрибут LANG ), но и BODY, и P соответствуют: lang (fr) (потому что оба находятся на французском языке).

<body lang=fr> 
    <p>Je suis Français.</p> 
</body>

источник

2016-02-28 12:09:41 Alohci

Не могли бы вы привести пример, чтобы продемонстрировать разницу? – Danield

Хорошо, я вижу - вот [демо] (http://codepen.io/danield770/pen/QNWBWE?editors=1100) - при использовании ': lang' каждый ребенок получает границу – Danield

@Danield: Is': lang' то же самое, что и '*: lang'? Я все еще немного смущен синтаксисом, потому что меня учили, что псевдоселектора используются для таргетинга элементов, находящихся в определенном состоянии. Смущающая часть для меня заключается в том, что перед «:» ничего нет. – Peter

CSS: lang pseudo class vs attribute selector

ответ

Смежные вопросы