Селекторы атрибутов CSS

Узнайте, как использовать селекторы атрибутов CSS

В этом посте я расскажу о селекторах атрибутов.

Также смвведение в основные селекторы CSS. Здесь я представляю несколько основных селекторов CSS: использование селекторов типа, класса, идентификатора, как их комбинировать, как настроить таргетинг на несколько классов, как стилизовать несколько селекторов в одном правиле, как следовать иерархии страниц с дочерними и направлять дочерние селекторы и соседние братья и сестры.

Селекторы наличия атрибутов

Первый тип селектора - это селектор наличия атрибута.

Мы можем проверить, есть ли у элементаимеетатрибут, использующий[]синтаксис.p[id]выберут всеpтеги на странице, которые имеютidатрибут, независимо от его значения:

p[id] {
  /* ... */
}

Селекторы точных значений атрибутов

В скобках вы можете проверить значение атрибута, используя=, и CSS будет применяться только в том случае, если атрибут соответствует точному указанному значению:

p[id="my-id"] {
  /* ... */
}

Соответствие части значения атрибута

Пока=давайте проверим точное значение, у нас есть другие операторы:

  • *=проверяет, содержит ли атрибут частичное
  • ^=проверяет, начинается ли атрибут с частичного
  • $=проверяет, заканчивается ли атрибут частичным
  • |=проверяет, начинается ли атрибут с частичного и за ним следует тире (например, обычно в классах), или просто содержит частичный
  • ~=проверяет, содержится ли партиал в атрибуте, но отделен ли он от остальных пробелами

Все упомянутые проверкичувствительный к регистру.

Если вы добавитеiнепосредственно перед закрывающей скобкой проверка будет нечувствительна к регистру. Он поддерживается во многих браузерах, но не во всех, проверьтеhttps://caniuse.com/#feat=css-case-insensitive.

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: