Как мастера пишут селекторы, которые другие не понимают

внешний интерфейс CSS SCSS
Как мастера пишут селекторы, которые другие не понимают

Как раз вовремя, чтобы Наггетсы разослали близлежащие мероприятия, спасибо за вашу постоянную поддержку мне и Наггетс, оставьте сообщение в области комментариев ниже и отправьте случайные подарки~

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

Благодаря этим примерам мы получаем представление о некоторых интересных аспектах селекторов CSS. Получите от этого полезный опыт.

Разновидность суперпозиции псевдоклассов

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

так:

a:not(main *:not(:is(h2, h3) > *)) {
  color: red;
}

Этот селектор даже не знает, что это такое, не глядя на него ни минуты. (Если вы посмотрите внимательно, вы можете не знать...)

Он смешивает два новых селектора псевдоклассов.

  • :not(): используется для сопоставления элементов, которые не соответствуют набору селекторов. Поскольку его роль заключается в предотвращении выбора определенных элементов, он также известен как псевдокласс отрицания.
  • :is(): принимает список селекторов в качестве параметра и выбирает любой элемент в списке, который может быть выбран селектором.

Конечно, для его разборки:

  1. a:not(main *): выбрать не<main>все теги под тегом
  2. main *:not(:is(h2, h3) > *):выберите<main>под этикеткой все не<h2>,<h3>элемент дочернего элемента

Так что резюмирую: выбирай все, а не<main>под этикеткой<a>этикетки и все<main>ниже нет<h2>,<h3>ребенок под<a>Все кроме<a>Этикетка.

Предположим, у вас есть следующий HTML

<main>
    <a href="">main>a</a>
    <h1><a href="">main>h1>a</a></h1>
    <h2><a href="">main>h2>a</a></h2>
    <h2><p><a href="">main>h2>p>a</a></p></h2>
    <h3><a href="">main>h3>a</a></h3>
</main>
<h1><a href="">h1>a</a></h1>
<h2><a href="">h2>a</a></h2>
<h3><a href="">h3>a</a></h3>
<a href="">a</a>

Результат выглядит следующим образом:

image

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

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

магические специальные символы

Что ж, однажды вы снова столкнулись с таким селектором:

#\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\?\>\<\\\[\]\{\}\|\`\# {
    color: red;
}

Боже мой. Я думаю, что вашей первой реакцией должно быть то, что этот селектор действительно работает?

Извините, но это действительно работает, имена классов CSS разрешены в CSS, кромеNULлюбой символ кроме .

Заинтересованные могут посмотреть вот это:Which characters are valid in CSS class names/selectors?

Следовательно, вышеупомянутый селектор, такой тег может быть сопоставлен:

<div id="~!@$%^&*()_+-=,./';:?><\[]{}|`#">Lorem</div>

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

<div id="💉💧🐂🍺">真滴牛啤</div>

#💉💧🐂🍺 {
    padding: 10px;
    color: red;
}

эммм, да, это тоже работает:

Поэтому он не особо грубый и мясистый, и крайне не рекомендуется добавлять вдобавок к именам классов CSS.-так же как_другие специальные символы.

несколько перекрытий самого себя

Селектор ниже тоже немного интересен, но его можно написать в особые моменты. Такой селектор:

div.g-text-color.g-text-color.g-text-color.g-text-color.g-text-color {
    color: red;
}

Почему появляется этот селектор? Чаще всего это делается для повышения приоритетов.

Все мы знаем, что между разными селекторами CSS есть высокий и низкий приоритет.

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

Причина в том, что приоритет селектора, определяющего стиль, недостаточно высок..

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

div.g-text-color.g-text-color.g-text-colorВес лучше, чемdiv.g-text-color.g-text-colorвыше. Поэтому в некоторых крайних случаях появляются вышеперечисленные селекторы.

Конечно, в обычных условиях не рекомендуется писать такой пугающий выбор.

В заключение

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

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

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

Отправить наггетсы вокруг

Я как раз вовремя опубликовал сообщение о предстоящих мероприятиях, спасибо за вашу постоянную поддержку меня и Nuggets по состоянию на 10 сентября:

  1. Оставьте сообщение в области комментариев ниже, получите топ-6 с наибольшей популярностью в области комментариев (количество комментариев + полные данные о количестве статей) и случайным образом отправьте 1 комплект значка Nuggets или 1 футболку Nuggets ITT.
  2. Кроме того, друг, который наберет первое количество лайков, я подарю вам дополнительную слепую коробку с фигуркой QQ~
Категории