Maison > Article > interface Web > Explication détaillée de la nouvelle utilisation des sélecteurs CSS

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

小云云original: 2018-02-05 10:18:421834parcourir

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

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

　 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">

【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>

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>

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

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

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;

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

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

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

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

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

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'exemple de fonction de téléchargement de fichier HTML5 type=fileArticle suivant：Explication détaillée de l'exemple de fonction de téléchargement de fichier HTML5 type=file

Articles Liés

Voir plus