[CSS] - это время использования: есть () уменьшить ваш код

внешний интерфейс HTML CSS
[CSS] - это время использования: есть () уменьшить ваш код

Что это такое?

is()ЯвляетсяCSS

перед использованием:

ul li,
ol li {}

После использования:

:is(ul, ol) li {}

Оптимизировать наш код

Если наша система более сложная,is()Это может помочь нам упростить код, например следующий код:

/* 3-deep (or more) unordered lists use a square */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

Упрощается до:

/* 3-deep (or more) unordered lists use a square */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  list-style-type: square;
}

Избегайте ошибок CSS

если нашCSSЕсть ошибки, из-за которых весь селектор не вступит в силу. Например, следующее.contentнаписано как:content.демонстрационный адрес

<div class="container-1">
  <p class="title">I am Gopal</p>
  <div class="content">我是锅巴</div>
</div>

<div class="container-2">
  <p class="title">I am Gopal</p>
  <div class="content">我是锅巴</div>
</div>

/* 写错，将导致都不生效 */
.container-1 .title, .container-1 :content {
  color: #885c5c;
}

Но если вы используете:is(),.title

/* content 写错，title 还可以生效 */
.container-2 :is(.title, :content) {
  color: #885c5c;
}

is()а такжеCSS

div, p, ul, ol {
  span {
    /* ... */
  }
}

/* 最终解析成 */
div span, p span, ul span, ol span {
  /* ...*/
}

Ниже приведены:is()реализация

:is(div, p, ul, ol) span {
}

Но следует отметить, что их приоритеты не совпадают.

приоритет

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

Чтобы понять, немного трудно произнести, глядя прямо надемонстрационный адрес

<ul class="container-3">
  <li class="title">I am Gopal</li>
  <li class="content">我是锅巴</li>
</ul>

/* 计算的时候，取 .list，而不是 ul。其优先级为 0 1 1 */
:is(ol, .list, ul) li {
  color: #885c5c;
}
/* 优先级为 0 0 2 */
ul li {
  color: #000;
}

В использовании:is(), его параметрыol, .list, ul, возьми высший.listВычисляется с приоритетом 0 1 1. а такжеul liПриоритет 0 0 2. так было бы:is()Селектор вступает в силу, даже если последний будет записан позже, это отличается от преселектора, и использование преселектора будет перезаписано последним.

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

:is()совместимость,IEВсе еще уничтожены, но можно использовать много сцен.Подробности

Ссылаться на

Категории