Maison >interface Web >tutoriel CSS >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:421867parcourir
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!