[CSS/DIV] Проанализировать использование четырёх основных селекторов значения атрибутов CSS

В этой статье мы расскажем вам об этомСелектор значения свойств CSSФормат селектора атрибутов — это элемент, за которым следуют скобки, с атрибутами в скобках, или выражениями атрибутов (не знаю, правильное ли описание, собственно созданные слова), такие как h1[title], h1[title="logo"] и т.д. — я уверен, что вы многому научитесь в этой статье.

Учебник по CSS: Селектор значений атрибутов CSS

CSS AttributeSelectors, возможно, вам не стоит быть знакомым с селекторами атрибутов, по сути, селекторы id и class — это селекторы значения атрибутов, просто выберите id или значение класса.

Формат селектора атрибутов — элемент, за которым следуют скобки, с атрибутами в скобках, или атрибутными выражениями (не знаю, правильное ли описание, собственно созданные слова), такие как h1[title], h1[title="Logo"] и т.д., ниже вы можете увидеть 4 конкретные формы из моего обсуждения.

1. Простой селектор значения атрибутов CSS

Независимо от названия, это характеристика простого селектора атрибутов.

h1[класс]{цвет:серебро; Будет действовать на любой элемент H1 с классом, независимо от значения класса. Следовательно<h1class="hoopla">Здравствуйте</h1>, <h1class="severe">Спокойствие</h1>, <h1class="fanzy"> h1 Fooling</h1> будет подчиняться этому правилу.

Разумеется, это «свойство» — это не просто класс или id, а все законные свойства элемента, например, alt img, например img[alt]{cssdeclarationshere; Будет применяться к любому элементу IMG с атрибутом alt. Затем a[href][title]{font-weight:bold; А как насчёт }? Как вы знаете, это работает с элементами с атрибутами href и title, например <atitle="W3CHome">W3C</a>.

2. Точный селектор значения атрибутов CSS

id и класс по сути являются точные селекторы значения атрибутов, да, h1#logo равен h1[id="logo"]. Как уже упоминалось, мы не ограничиваемся id или классом, мы можем использовать любое свойство! Например, a[][title="W3CHome"]{font-size:200%; } будет применяться к <atitle="W3CHome">W3C</a>.

3. Некоторые селекторы значений атрибутов CSS

Как следует из названия, если значение атрибута частично совпадает (в данном случае часть, которая фактически совпадает со всем словом), будет действовать на элемент. Рассмотрим пример:

Любой из них может сделать шрифт p жирным.

Этот селектор очень полезен, например, если вы хотите стилизировать иллюстрацию со строкой «Figure» в названии, например title="Image5:xxx description", вы можете использовать img[title~="Figure"].

Следует отметить, что, как я подчеркнул в первом предложении, нужно совпасть со всем словом, и img[title~="Figure"] не будет совпадать с title="Image5:xxx description".

Также я провёл небольшой тест: в примере меняешь «Рисунок» на «Иллюстрация», а img[title~="Figure"] меняешь на img[title~="Illustration"], и в Firefox всё равно совпадает, независимо от того, кодировка GB2312 или UTF-8. Похоже, что поддержка китайского языка в CSS неплохая.

4. Специальный селектор значения атрибутов CSS

Этот селектор довольно странный. Это работает так: проще привести пример, чем описать.

*[lang|="en"]{color:white; Это правило выберет значение атрибута lang или элемента, начинающегося с en-. То есть он может соответствовать <h1lang="en">Здравствуйте!</h1>, <plang="en-us">Приветствую!</p>и <divlang="en-au">Привет!</div>и не совпадает<plang="fr">Bonjour!</p>и <h3lang="cy-en">Jrooana!</h3>.