Explication détaillée de la nouvelle utilisation des sélecteurs CSS-tutoriel CSS-php.cn

Explication détaillée de la nouvelle utilisation des sélecteurs CSS

小云云

Libérer： 2018-02-05 10:18:42

original

1832 Les gens l'ont consulté

Maintenant, les préprocesseurs (tels que sass) semblent être devenus le standard pour développer du CSS, tout comme jQuery était le standard pour développer du JS il y a quelques années. Le querySelector de JS s'appuie sur les idées de sélection de jQuery, et les sélecteurs CSS s'appuient également sur des fonctions courantes telles que la définition de variables de préprocesseur, l'imbrication de sélecteurs et la réutilisation de blocs de code. Cet article présentera en détail la nouvelle utilisation des sélecteurs CSS.

Variables

Généralement, lorsque nous faisons du développement Web, nous aurons un ensemble de spécifications de définition de variables, en prenant sass comme exemple, comme indiqué ci-dessous

// 颜色定义规范
$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

Copier après la connexion

La syntaxe des variables CSS est la suivante

【Déclaration des variables】

Variables doit commencer par --. Par exemple, --example-variable: 20px signifie attribuer 20px à la variable --example-varibale

Vous pouvez placer l'instruction déclarant la variable dans n'importe quel élément. peut le définir sur : root, body ou html

:root{--bgColor:#000;}

Copier après la connexion

　 La déclaration de variable est comme une déclaration de style normale, vous pouvez également utiliser le style en ligne

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

Copier après la connexion

【Utiliser des variables】

Utilisez la fonction var() pour utiliser des variables, et elles peuvent être utilisées n'importe où. Par exemple : var(--example-variable) renverra la valeur correspondant à --example-variable

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

Copier après la connexion

La fonction var() a également un paramètre facultatif , Utilisé pour définir la valeur par défaut. Lorsque la variable ne peut pas obtenir la valeur, la valeur par défaut est utilisée

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

Copier après la connexion

　 [Note] L'utilisation détaillée de CSS. les variables se déplacent ici

@apply

Avant d'introduire @apply, introduisons la macro de mixage @mixin dans sass, qui fait référence à un bloc de code réutilisable

Par exemple, la réutilisation cachée du débordement de texte courant

@mixin overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
p {
    @include  overflow-ellipsis;
}

Copier après la connexion

Et l'ensemble de règles d'application @apply implémente également des fonctions similaires. Par rapport à var(), @apply fait référence à une collection de styles, tandis que var() fait référence à une seule valeur de style

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

Copier après la connexion

Sélection personnalisée

Le sélecteur personnalisé est défini par @custom-selector, suivi de :--Ensuite, le nom du sélecteur personnalisé, suivi des sélecteurs qui doivent être définis, plusieurs séparés par des virgules Open

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

Copier après la connexion

De cette façon, :--heading devient un sélecteur utilisable

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

Copier après la connexion

Le ci-dessus, deux morceaux de code ont le même effet

Imbrication de sélecteurs

Les règles CSS contiennent beaucoup de contenu répété

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;
}

Copier après la connexion

Après avoir utilisé la syntaxe imbriquée, le code est le suivant

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

Copier après la connexion

Lorsque vous utilisez des règles de style imbriquées, vous devez pouvoir référencer des éléments correspondant aux règles parent ; après tout, c'est tout le point de nidification. Pour atteindre cet objectif, cette spécification définit un nouveau sélecteur, le sélecteur imbriqué, écrit sous la forme du symbole ASCII &

Lorsqu'il est utilisé dans un sélecteur d'une règle de style imbriquée, le sélecteur imbriqué est représenté par L'élément correspondant par le règle parentale. Utilisé dans un autre contexte, cela ne veut rien dire. (C'est-à-dire qu'il est valide, mais ne correspond à aucun élément)

[Note] Les deux manières incorrectes d'écrire des sélecteurs imbriqués sont les suivantes

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

Copier après la connexion

【@nest】

Afin de résoudre la fragilité du sélecteur imbriqué et supérieur, vous pouvez utiliser le sélecteur @nest @nest a une gamme d'applications plus large, à condition qu'il soit combiné avec le. sélecteur imbriqué & Ils peuvent travailler ensemble

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

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

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

　　[注意]@nest选择符的两种错误写法如下所示

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

Copier après la connexion

Enfin

Malheureusement, sauf les variables CSS, les variables peuvent être utilisées sous le nouveau version de Chrome De plus, d'autres nouvelles utilisations des sélecteurs CSS ne sont actuellement pas prises en charge par les navigateurs. Cependant, le plug-in cssnext dans le post-processeur CSS postcss peut résoudre tous les problèmes

Tout comme le dit le site officiel de cssnext, commencez dès aujourd'hui à utiliser la syntaxe CSS de demain

Recommandations associées :

Méthode d'implémentation de l'analyse du champ du sélecteur CSS

Explication détaillée du sélecteur CSS

Bande dans le sélecteur CSS Solution au point (.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!