Углубляемся в селекторы свойств CSS

внешний интерфейс CSS
Углубляемся в селекторы свойств CSS

Селектор свойств CSS, который может сопоставлять элементы по имени существующего свойства или значению свойства.

Селекторы свойств появились в CSS2 и были значительно расширены в CSS3. В этой статье будет подробно представлен селектор атрибутов, и мы постараемся максимально подробно изучить различные варианты использования этого селектора в различных сценариях.

Простое введение в грамматику

  • [attr]: этот селектор выбирает все элементы, содержащие атрибут attr, независимо от значения attr.
  • [attr=val]: этот селектор выбирает только все элементы, атрибуту attr которых присвоено значение val.
  • [attr~=val]: этот селектор выбирает только элементы с атрибутом attr и требует, чтобы значение val было одним из списка значений, разделенных пробелами, содержащихся в значении attr.

Селектор атрибута значения подстроки,

Ниже приведены новые грамматики в CSS3, также известные как «псевдорегулярные селекторы», поскольку они предоставляют гибкие методы сопоставления, аналогичные регулярным выражениям.

  • [attr|=val] : выбирает элементы, значение атрибута attr которых равно val или значение которых начинается с val- (обратите внимание, что "-" здесь не является ошибкой, это используется для работы с кодировкой языка).
  • [attr^=val]: выбирает элементы, значение атрибута attr которых начинается с val (включая val).
  • [attr$=val]: выбирает элементы, значение атрибута attr которых заканчивается (включая val) на val.
  • [attr*=val]: выбирает элементы, значение атрибута attr которых содержит подстроку val (подстрока — это просто часть строки, например, «кошка» — это подстрока строки «гусеница»

Самое простое использование селекторов свойств CSS

В основном селекторы атрибутов используются для выбора элементов DOM по значениям их атрибутов. Таким образом, все полосы будут выбраныhrefАтрибутированный элемент DOM:

[href] {
    color: red;
}

CodePen Demo -- Базовое использование селекторов атрибутов

Немного более сложное использование

Каскадный выбор

div [href]{
...
}

Выбор соединения с несколькими условиями

Выберите тег img с атрибутом title и элемент с логотипом имени класса.

img[title][class~=logo]{
...
}

Псевдорегулярное письмо

  • iпараметр

Игнорировать ограничения регистра для имен классов, выбрать p элементов, содержащих класс, где имя класса содержит подстроки текста, Text, TeXt... и т. д. Значение i здесь — это значение параметра i в обычном, игнорировании, значение игнорирования регистра.

p[class*="text" i] {
...
}

Таким образом, приведенный выше селектор может выбрать целевой элемент следующим образом:

<p class="text"></p>
<p class="nameText"></p>
<p class="desc textarea"></p>
  • gпараметр

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

CodePen Demo — псевдорегулярное использование селекторов атрибутов

Сотрудничать:not()псевдокласс

Другим распространенным сценарием является коллокация:not()Псевдокласс, выполните некоторые функции обнаружения суждений. Например, следующий селектор может выбрать все[href]атрибутaметку, добавьте красную рамку.

a:not([href]){
    border: 1px solid red;
}

Конечно, немного сложнее, мы можем сопоставить более одного:not()Подобные псевдоклассы можно использовать несколько раз одновременно, выбирая тег без атрибутов href, target или rel:

a:not([href]):not([target]):not([rel]){
    border: 1px solid blue;
}

CodePen Demo — селектор свойств с псевдоклассом :not

Переопределить встроенные стили?

Даже, если есть такой сценарий, мы также можем переопределить встроенный стиль, например:

<p style="height: 24px; color: red;">xxxxxx</p>

Мы можем принудительно переопределить вышеуказанные стили, используя селекторы атрибутов:

[style*="color: red"] {
    color: blue !important;
}

Сочетание использования бокса с псевдоэлементами для улучшения взаимодействия с пользователем.

Конечно, селекторы атрибутов не обязательно должны быть простым выбором меток.

С помощью псевдоэлементов мы можем реализовать множество функций, которые помогут улучшить взаимодействие с пользователем.

Угловая функция

Вот небольшой пункт знаний, псевдоэлементыcontentсвойства, черезattr(xxx), вы можете прочитать значение атрибута с именем xxx, соответствующего тегу элемента DOM.

Следовательно, с помощью селектора атрибутов мы можем легко реализовать некоторые функции меток углов:

<div count=“5“>Message</div>

div {
    position: relative;
    width: 200px;
    height: 64px;
}

div::before {
    content: attr(count);
    ...
}

image

Здесь цифра 5 в нижнем правом углу указывает на то, что для достижения сопряжения элементов селектора псевдоатрибутов используется селектор псевдоатрибутов, его можно адаптировать к различной длине, а на английском языке можно сохранить некоторые метки.Demo Demo - селектор атрибутов реализует функцию угловой этикетки

Селекторы атрибутов работают с псевдоэлементами для реализации функции заголовка класса.

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

<img src="xxxxxxxxx" title="风景图片">

attributeselector

не обязательно здесьimgтеги, другие теги добавленыtitleсвойства могут иметь аналогичный эффект. Но здесь есть две проблемы:

  • Ответ слишком медленный, обычно требуется около 1s для поля заголовка, когда мышь скрывает
  • Структура фрейма не может быть изменена, стиль всплывающего окна не может быть изменен.

Итак, здесь, если мы хотим иметь плавающие слои с быстрым откликом, стилем которых мы можем управлять, мы можем настроить атрибут заголовка класса, назовем егоpopTitle, то вы можете сделать это:

<p class="title" popTitle="文字弹出">这是一段描述性文字</p>
<p class="title" popTitle="标题A">这是一段描述性文字</p>

p[popTitle]:hover::before {
    content: attr(popTitle);
    position: absolute;
    color: red;
    border: 1px solid #000;
    ...
}

Для сравнения первый роднойtitleатрибутов, следующие два являются советами по использованию селекторов атрибутов с моделированием псевдоэлементов:

attributeselector2

встроенный браузерtitleСтабилизация свойства задержки отклика заключается в добавлении уровня защиты от частых срабатываний, здесь также можно добавить к псевдоэлементу 100 миллисекунд.transition-delayДобиться отложенного показа.

CodePen Demo — селектор атрибутов с псевдоэлементом для достижения функции заголовка класса

Эффект быстрого отображения продукта

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

Мы хотим добавить к изображению несколько меток и показывать их при наведении курсора на изображение.

Конечно, в CSS такие вещи, как<img>,<input>,<iframe>, эти теги не поддерживают псевдоэлементы.

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

<div class="g-wrap" desc1="商品描述AAA" desc2="商品描述BBB">
    <img src="https://xx.baidu.com/timg?xxx" >    
</div>

[desc1]::before,
[desc2]::after {
    position: absolute;
    opacity: 0;
}

[desc1]::before {
    content: attr(desc1);
}

[desc2]::after {
    content: attr(desc2);
}

[desc1]:hover::before,
[desc2]:hover::after{
    opacity: 1;
}

Взгляните на эффект:

attributeselector4

Демонстрация CodePen — добавление тегов к изображениям с помощью селекторов атрибутов

Селектор атрибутов взаимодействует с псевдоэлементом для реализации запроса на загрузку.

Как мы знаем, HTML5 добавляет к тегу атрибут загрузки, этот атрибут указывает браузеру загружать URL-адрес вместо перехода к нему.

Затем мы можем использовать селекторы атрибутов, чтобы запрашивать все элементы с такими тегами. так:

<a href="https://www.xxx.com/logo.png" download="logo">logo</a>

[download] {
    position: relative;
    color: hotpink;
}

[download]:hover::before {
    content: "点击可下载此资源！";
    position: absolute;
    ...
}

Когда мы наводим курсор на ссылку, она будет выглядеть так, подсказывая пользователю, что это загружаемая кнопка:

attributeselector3

CodePen Demo -- селектор атрибутов с псевдоэлементом для загрузки

Селектор атрибутов взаимодействует с псевдоэлементом, чтобы указать протокол ссылки (http/https).

Сейчас большинство веб-сайтов либо урезают https, либо находятся на пути к урезанию https. Если на странице много ссылок или есть требование к протоколу страницы перехода, это также хороший способ использовать селектор атрибутов в сочетании с псевдоэлементом, чтобы запросить протокол ссылки.

a[href^="http:"]:hover::before {
    content: "这是一个http链接";
    ...
}

a[href^="https:"]:hover::before {
    content: "这是一个https链接";
}

CodePen Demo -- селектор атрибутов с псевдоэлементом для запроса протокола ссылки (http/https)

Конечно, содержимое псевдоэлементов не обязательно является чистым текстом.Для того, чтобы предоставить пользователям лучший опыт, также можно добавить текст к картинкам или картинкам.

Например, мы можем визуально добавить небольшой зеленый замок на сайт ссылок https, что соответствует некоторому обычному познанию пользователей.

image

Здесь я вставляю изображение маленького зеленого замка в псевдоэлемент, используя base64, который прост в использовании.text-indentУправление расположением графики и текста:

a[href^="https:"]:hover::before {
    content: "";
    padding-left: 16px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAb0lEQVQoz2NkQAJc5aIc//7962VgYIiDCi1iYmIq/tb5+gdMDROyBqhiGWYmJlVmJiZVBgYGGagYdsBRKvyZu1xUAsbnLheV4CgV/oxbQ4nwf0JiTAwkAkaIU4QaGf4z1uFX+b/pR/e7epJtGJEaAKDXHzEJ3KYmAAAAAElFTkSuQmCC");
    ...
}

attributeselector5

Это всего лишь очень маленькая демонстрация.Реальная ситуация такова, что большинство пользователей не понимают значение этого маленького зеленого замка, поэтому фактическое использование должно сопровождаться текстовыми подсказками.

CodePen Demo -- селекторы атрибутов и псевдоэлементы для графических подсказок по протоколу https

Обработка типов файлов селекторами атрибутов

Вы также можете предоставить визуальные подсказки для некоторых загружаемых ресурсов.

<ul>
    <li><a href="xxx.doc">Word File</a></li>
    <li><a href="xxx.ppt">PPT File</a></li>
    <li><a href="xxx.PDF">PDF File</a></li>
    <li><a href="xxx.MP3">MP3 File</a></li>
    <li><a href="xxx.avi">AVI File</a></li>
</ul>

a[href$=".doc" i]::before {
    content: "doc";
    background: #a9c4f5;
}
a[href$=".ppt" i]::before {
    content: "ppt";
    background: #f8e94f;
}
a[href$=".pdf" i]::before {
    content: "pdf";
    background: #fb807a;
}
a[href$=".mp3" i]::before {
    content: "mp3";
    background: #cb5cf5;
}
a[href$=".avi" i]::before {
    content: "avi";
    background: #5f8ffc;
}

image

CodePen Demo -- селектор атрибутов для выбора суффикса имени файла

пара селекторов атрибутовinputтип обработки

Селекторы атрибутов на самом делеinputЭлементы типа — отличный помощник, потому чтоinputОбычно используется и часто сочетается со значениями атрибутов многих различных функций.

Однако, посколькуinputТипы не могут добавлять псевдоэлементы. Следовательно, с помощью селектора атрибута он больше меняет свой собственный стиль через различные состояния атрибута.

Простой пример, например:

<input type="text">
<input type="text" disabled>

input[type=text][disabled] { 
    border: 1px solid #aaa;
    background: #ccc; 
}

Вот мы и выбралиtype=textи имеютdisabledатрибутinputэлемент, установите его цвет фона и цвет границы на серый. Дайте пользователям лучшие визуальные подсказки.

image

Примечательные моменты

Обратите внимание на приоритет селектора,.classа также[class=xxx]Это эквивалентно

Рассмотрим этот вопрос: эквивалентны ли следующие два селектора?

<div class="header">

.header {
    color: red;
}

[class~="header"] {
    color: blue;
}

Вышеупомянутые два селектора имеют точно такой же эффект. Однако, если это так, они разные:

<div id="header">

#header{
    color: red;
}

[id="header"] {
    color: blue;
}

Здесь селектор ID#headerчем селектор атрибутов[id="header"]Вес выше, хотя они могут выбирать одни и те же элементы, но они не полностью эквивалентны.

Требуются ли кавычки?

Рассмотрим следующие три ситуации. Последовательны ли они?

[class="header"]{ ... }

[class='header']{ ... }

[class=header]{ ... }

На самом деле, начиная с HTML2, поддерживается запись без кавычек, так что все три вышеперечисленных правильны.

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

a[href=bar] { ... }

a[href^=http://] {... }

Второй селектор является недопустимым селектором,://Без кавычек идентифицирует ошибку, должна быть заключена в кавычки, подобные этойa[href^="http://"], вы можете увидеть эту статью по конкретным причинам здесь:Unquoted attribute value validator.

Так что на всякий случай рекомендуется ставить кавычки.

Семантика CSS

Принципы написания «семантического HTML» являются основой современной профессиональной разработки интерфейса. Конечно, все, о чем мы говорим, это семантика HTML.

Итак, должен ли CSS быть семантическим? Является ли CSS семантическим? Как и в приведенном выше примере, это можно сделать с помощью определенного имени класса или селектора идентификатора. Так в чем же смысл использования селекторов атрибутов?

Насколько я понимаю, атрибуты сами по себе уже имеют определенную семантику, выражая определенные особенности или функции элементов.Использование атрибутов для выбора элементов и последующего выполнения определенных операций над значениями атрибутов также может в определенной степени помочь улучшить семантику кода. . По крайней мере, улучшить читаемость кода CSS. Но вопрос о том, должен ли CSS быть семантическим, зависит от мнения.

наконец

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

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории