3 Псевдокласс CSS сэкономил сотни строк кода CSS~

:где

основное использование

:where() Функция псевдокласса CSS, которая принимает список селекторов в качестве аргумента, выберет все элементы, которые могут быть выбраны любым из правил в этом списке селекторов.

Следующий код превратит текст в желтый цвет

:where(div p) span {
    color: yellow;
}

<div class="test-div">
    <span>hello</span>
</div>
<p class="test-p">
    <span>hello</span>
</p>

сцены, которые будут использоваться

На самом деле :where() функция уже существует, но имея ее, реализовать эти функции удобнее и быстрее~ Далее поговорим о функции ее комбинации/суперпозиции.

Давайте посмотрим на следующий код css

div a:hover,
li a:hover,
.cla a:hover,
.aa .bb a:hover,
[class^='bold'] a:hover{
  color: yellow;
}

Мы можем использовать :where(), чтобы упростить этот метод записи, использовать его для поиска трех селекторов div li .cla, селектор может быть меткой, именем класса или выражением селектора.

:where(div, li, .cla, .a .b, [class^='bold']) a:hover {
    color: yellow;
}

Давайте посмотрим на :where() комбинацию, используемую для выполнения некоторых функций. Давайте посмотрим на следующий код

.dark-theme button,
.dark-theme a,
.light-theme button,
.light-theme a{
 color: pink;
}

Мы можем полностью :where() упростить это письмо.

:where(.dark-theme, light-theme) :where(button, a) {
    color: pink;
}

приоритет

:where()Приоритет равен 0, мы видим следующий код

.test {
    color: yellow;
}
:where(.test) {
    color: pink
}

Окончательный цвет шрифта желтый

совместимость

все зеленое~

:is

:is() Это :where() точно так же, как можно сказать, отличие :is() в том, что приоритет не 0, а определяется…