CSS селекторы новые виды

Теперь, предварительно процессор (например, дерзость), кажется, стали стандартом в разработке CSS, JQuery всего несколько лет назад, чтобы разработать стандарт, как JS. JS querySelector рисует JQuery селектор мышления, CSS селекторы также рисовать определения переменных препроцессора, вложенную селектор, блок повторного использования общих функций. Эта статья подробно описывает новое применение CSS селекторов

переменная

В общем случае, когда выполняются мы веб-разработка, будет спецификация определения переменной в Sass, например, как показано ниже

// 颜色定义规范
$color-background : #222
$color-background-d : rgba(0, 0, 0, 0.3)
$color-highlight-background : #333

//字体定义规范
$font-size-small : 12px
$font-size-medium : 14px
$font-size-large : 18px

Синтаксис CSS переменных следующим образом

[Variable] Заявление

Переменные должны --начинаться с. Э.Г. -example переменной: 20px, 20px Значение присваивается переменной -example-varibale

Переменный оператор объявления могут быть размещены в любом элементе, если вы хотите установить глобальную переменную, вы можете установить: корень, тело или HTML

:root{--bgColor:#000;}

Объявление переменное как нормальный оператор объявления типа, вы можете также использовать встроенные стили

<body style="--bgColor:#000">

[Использование] переменная

Использование вар () функция использует переменный, и может быть использована в любом месте. Например: Var (-example-переменной) -example переменной возвращает значение, соответствующее

<body style="--bgColor:#000;">
    <div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div>    
</body>

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

<div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div>

@подать заявление

Перед введение @apply, ввести смешанные SASS макросов @mixin, относится к кодовым блокам может быть повторно использован

Например, общий текст переполнения скрытого повторный

专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
@mixin overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
div {
    @include  overflow-ellipsis;
}

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

:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

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

Путем выбора пользовательской @custom-selectorопределенной, за которым следует :--затем имя пользовательского селектора, а затем с помощью селекторов , чтобы определить множество разделенных запятыми

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

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

:--heading{
  margin: 0;
}
h1, h2, h3, h4, h5, h6｛
   margin: 0; 
｝

Тот же самый эффект из указанных выше двух кодов

Уплотненный селектор

Правило CSS содержит много дублированного контента

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

Использование вложенного синтаксиса, следующее

table.colortable {
  &amp; td {
    text-align:center;
    &amp;.c { text-transform:uppercase }
    &amp;:first-child, &amp;:first-child + td { border:1px solid black }
  }
  &amp; th {
    text-align:center;
    background:black;
    color:white;
  }
}

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

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

Примечание: две ошибочные записи вложенные & Селекторы показано ниже

.foo {
  color: red;
  .bar &amp; { color:blue; }
}
.foo {
  color: red;
  &amp;.bar, .baz { color: blue; }
}

【@гнездо】

В целях устранения уязвимости вложенных селекторов и выше, вы можете использовать @nest селекторов @ гнездо применимого к более широкому кругу, до тех пор, как вложенные селекторы и совместные действия в

.foo {
  color: red;
  @nest &amp; > .bar {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   .foo > .bar { color: blue; }

.foo {
  color: red;
  @nest .parent &amp; {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   .parent .foo { color: blue; }

.foo {
  color: red;
  @nest :not(&amp;) {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   :not(.foo) { color: blue; }

Примечание: @nest селекторы две ошибки записывается следующим образом

.foo {
  color: red;
  @nest .bar {
    color: blue;
  }
}
.foo {
  color: red;
  @nest &amp; .bar, .baz {
    color: blue;
  }
}
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

в конце концов

К сожалению, в дополнение к переменной CSS переменные могут быть использованы в новой версии хром, другие новые виды использования CSS селекторов на данный момент нет поддержки браузера. Тем не менее, cssnext плагин CSS постпроцессор postcss может решить все проблемы

Как сообщает официальный сайт cssnext сказал то же самое сегодня, завтра будет начать использовать синтаксис CSS

Программирование Мира - Облако

Опубликовано 267 оригинальные статьи · вона похвала 9 · просмотров 10000 +

Частные письма относится