Селекторы CSS, которые вы должны знать о интерфейсных макетах

предисловие

Иногда я думаю, у нас уходит много времени на написание страниц на фронтенде, можно ли сократить эту часть времени? Вы конечно скажете "ты тупой, у тебя нет UI библиотеки!", но не забывайте, не в каждом проекте есть UI библиотека, а использование чужой UI библиотеки одновременно не может решить все ваши Если бы мы знали больше о селекторах CSS, мы могли бы написать гораздо меньше кода JavaScript, например: эффекты входа и выхода мыши, переключение фонового изображения вкладок, затухание и затухание изображений и т. д. Нам нужно освоить эти (Включая менее часто используемые) селекторы CSS, независимо от того, размещаем ли мы пользовательский интерфейс во внешнем интерфейсе или заменяем эффект написания JavaScript, это может значительно повысить нашу эффективность.

Классификация селекторов CSS

Селектор подстановочных знаков

*{
    margin:0;
    padding:0;
}

Селектор элемента (тега)

p{
    color:red;
}

селектор класса

.warning{
    color:red;
}

Селектор идентификатора

#warning{
    color:red;
}

приоритет

!important > Встроенные стили > Селекторы идентификаторов > Классы, псевдоклассы, атрибуты > Элементы, псевдоэлементы > Наследовать > Подстановочные знаки

подборщик недвижимости

пример HTML

<ul>
    <li foo>1</li>
    <li foo="abc">2</li>
    <li foo="abc efj">3</li>
    <li foo="abcefj">4</li>
    <li foo="efjabc">5</li>
    <li foo="ab">6</li>
</ul>

[attribute]

[foo]{
    background-color:red;
}

выбрать все полосыfooэлемент атрибута

[attribute=value]

Выбирает все элементы с атрибутом=значение.

[foo=abc]{
    background-color:red;
}

[attribute~=value]

Выбирает все элементы, чей атрибут attribute содержит значение слова.

[foo~=abc]{
    background-color:red;
}

[attribute^=value]

Выбирает все элементы, значение атрибута которых начинается со значения. регулярное выражение^, начиная с чего

[foo^=abc]{
    background-color:red;
}

[attribute$=value]

Выбирает все элементы, значение атрибута которых заканчивается значением. регулярное выражение$, заканчивая чем

[foo$=abc]{
    background-color:red;
}

[attribute*=value]

выберите его атрибут атрибутаВключают value подстрокакаждого элемента.

[foo*=abc]{
    background-color:red;
}

[attribute|=value]

выберитеattributeЗначение свойства начинается сvalueвсе элементы в начале.

[foo|=abc]{
    background-color:red;
}

Селектор структуры документа

пример HTML

<ul>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
</ul>

элемент селектора потомков

Выбирает все элементы элемента внутри элемента элемента.

ul li{
    border: 1px solid red;
}

Дочерний элемент селектора>элемент

Выбирает все дочерние элементы элемента, чьим родительским элементом является элемент элемента.

 ul>li>p{
   border: 1px solid red;
}

Смежный родственный элемент селектора + элемент

Выбирает элемент element сразу после элемента element.

пример HTML

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

h1+p{
    color:red;
}

Общий родственный селектор element1~element2

Выбирает каждый элемент elem, которому предшествует элемент element1.

пример HTML

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

 h1~p{
   border: 1px solid red;
}

Селектор псевдокласса

:root Псевдокласс корневого элемента документа

:root{
    background-color:red;
}

:nth-child(n) дочерний селектор

пример HTML

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

div :nth-child(1){
    color:red;
}

:nth-of-type(n) n-й элемент того же типа

div p:nth-of-type(2){
    color: red;
}

element:first-child

Выбирает первый дочерний элемент, принадлежащий элементу родительского элемента. Эквивалентно :nth-child(1)

element:last-child

Выбирает последний дочерний элемент, принадлежащий элементу родительского элемента.

element:first-of-type

первый дочерний элемент того же типа

element:last-of-type

последний дочерний элемент того же типа

element:only-child

Выбран единственный дочерний элемент родительского элемента

пример HTML

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
<div>
    <h1>h2</h1>  
</div>

 div :only-child{
    color: red;
 }

Только один элемент h1 находится под тегом div элемента, который окончательно вступит в силу, то есть содержимое h2 станет красным, а все те, что удовлетворяют условиям, будут изменены

:empty не имеет детей

<!DOCTYPE html>
<html>
<head>
<style> 
p:empty
{
width:100px;
height:20px;
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p></p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

</body>
</html>

эффективный<p></p>, не имеет дочерних элементов

:nth-last-child(n) n-й последний дочерний элемент

<!DOCTYPE html>
<html>
<head>
<style> 
div :nth-last-child(1){
    color:red;
}
</style>
</head>
<body>
    <div>
        <p>第一个段落。</p>
        <p>第二个段落。</p>
        <p>第三个段落。</p>
        <p>第四个段落。</p>
        <p>第五个段落。</p>
    </div>	
</body>
</html>

Выбран последний элемент родительского элемента div

element:nth-last-of-type(n)

n-й последний дочерний элемент того же типа

<!DOCTYPE html>
<html>
<head>
<style> 
div p:nth-last-of-type(2){
	color:red;
}
</style>
</head>
<body>
  <div>
    <h1>h11</h1>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <h1>h11</h1>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
    <h1>h11</h1>
  </div>	
</body>
</html>

<p>第四个段落。</p>В теге p того же типа предпоследний

div p:nth-last-of-type(2n+1){
	color:red;
}

2n+1(нечетное): нечетное число, 2n(четное): четное число

element:last-of-type

предпоследний дочерний элемент того же типа

element:first-of-type

первый дочерний элемент того же типа

element:only-of-type

Единственный дочерний элемент того же типа в родительском элементе

<!DOCTYPE html>
<html>
<head>
<style> 

div h1:only-of-type{
    color: red;
}

</style>
</head>
<body>
<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <h1>h1</h1>
</div>
<div>
    <h1>h2</h1>
</div>
</body>
</html>

<h1>h2</h1>совпадение, выбранный

a:link

статус не посещаемый

a:active

ссылка нажимается

a:hover

Выберите ссылку, на которой находится указатель мыши.

a:visited

Выберите все ссылки, которые были посещены.

:focus

Селектор :focus используется для выбора элемента в фокусе.

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

:enabled / :disabled

Выберите каждый включенныйinputэлемент / выберите каждый отключенныйinputэлемент

:checked

выбрать каждый выбранныйinputэлемент. Пользовательские переключатели могут быть реализованы с помощью этого

:not(selector)

Выбирает каждый элемент, который не является элементом селектора. (Наоборот)

Селектор псевдоэлементов

element::first-line

<!DOCTYPE html>
<html>
<head>
<style>

p:first-line{
	background-color:yellow;
}

</style>
</head>
<body>
<h1>WWF's Mission Statement</h1>
<p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
</body>
</html>

Первая строка элемента p изменяется

element::first-letter

<!DOCTYPE html>
<html>
<head>
<style>
h1:first-letter{
	color:yellow;
}
</style>
</head>

<body>
<h1>WWF's Mission Statement</h1>
</body>
</html>

Первый символ становится желтым сразу, если это делает JavaScript, вам нужно получить строку, получить первый символ и изменить его цвет.

element::before

Вставляет содержимое перед содержимым каждого элемента element. Мы, скорее всего, будем использовать его как div

element::after

Вставьте содержимое после содержимого каждого элемента element. Возможно, мы больше привыкли очищать всплывающие подсказки или подсказки формы проверки и т. д.

::selection

Выделяет часть элемента, выбранного пользователем.

использованная литература

W3C

Эпилог

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

В то же время, если у вас есть лучшие идеи, пожалуйста, оставьте сообщение

Если в тексте есть неточности или ошибки, просьба указать

Прошлые статьи:

Практические статьи по оптимизации внешнего кода

Практические инструменты и методы во фронтенд-разработке

Распространенные сценарии применения интерфейсных промисов