Comment utiliser le sélecteur pour exclure des éléments en CSS

CSS est l'une des compétences importantes dans le développement front-end. En plus de la sélection de base des éléments et de la modification des styles, la sélection et l'exclusion sont également un point de connaissance très important en CSS. Cet article expliquera les exclusions de sélection en CSS et fournira des cas pratiques pour référence.

Introduction aux sélecteurs

Avant d'apprendre la sélection et l'exclusion, comprenons d'abord les bases des sélecteurs CSS.

Les sélecteurs CSS sont utilisés pour sélectionner des éléments HTML. En CSS, il existe de nombreux types de sélecteurs, tels que les sélecteurs de base, les sélecteurs hiérarchiques, les sélecteurs de pseudo-classe, etc. Ces sélecteurs ont des utilisations et une syntaxe différentes.

Il existe plusieurs types de sélecteurs de base :

• Sélecteur de balise : Sélectionnez via le nom de balise de l'élément HTML, par exemple : p{color:red}
p{color:red}
• 类选择器：通过HTML元素的class属性进行选择，例如：.myclass{color:blue}
• ID选择器：通过HTML元素的ID属性进行选择，例如：#myid{color:green}
• 通配符选择器：选择所有HTML元素，例如：*{color:pink}
• 属性选择器：通过HTML元素的属性值进行选择，例如：[href="http://www.example.com"]{color:purple}

通过以上基本选择器的组合，我们可以精确地选择HTML元素，并通过CSS来修改其样式。

选择排除

有时候我们不仅要选择元素，还需要排除一些元素，这时候选择排除就非常有用了。

CSS中的选择排除有以下几个方法：

• :not伪类
• :first-child伪类
• :last-child伪类
• :only-child伪类

下面我们来依次介绍。

:not伪类

:not伪类用于排除某些元素，通过简单的语法，我们可以在选择器中排除指定的元素。

例如，我们想要选择所有p元素，但排除掉p元素中带有class="no"的元素，可以使用以下语法：

p:not(.no){color:blue}

这样就可以精确地选择到所有p元素，但是排除了带有class="no"的元素，将它们的文本字体颜色修改为了蓝色。

:first-child伪类

:first-child伪类表示选择第一个子元素，同样也可以用于排除某些元素。

例如，我们想要选择所有li元素的第一个子元素a，但排除掉带有class="no"的元素，可以使用以下语法：

li > a:first-child:not(.no){color:blue}

这样就可以精确地选择到所有li元素的第一个子元素a，但是排除了带有class="no"的元素，将它们的文本字体颜色修改为了蓝色。

:last-child伪类

:last-child伪类表示选择最后一个子元素，同样也可以用于排除某些元素。

例如，我们想要选择所有ul元素最后一个子元素li，但排除掉带有class="no"的元素，可以使用以下语法：

ul > li:last-child:not(.no){color:blue}

这样就可以精确地选择到所有ul元素最后一个子元素li，但是排除了带有class="no"的元素，将它们的文本字体颜色修改为了蓝色。

:only-child伪类

:only-child伪类表示选择唯一的子元素，同样也可以用于排除某些元素。

例如，我们想要选择所有div元素，但只选择唯一的子元素p，并排除掉带有class="no"的元素，可以使用以下语法：

div > p:only-child:not(.no){color:blue}

这样就可以精确地选择到所有div元素唯一的子元素p，但是排除了带有class="no"的元素，将它们的文本字体颜色修改为了蓝色。

实际案例

以下提供一个实际案例，来展示如何使用选择排除。

案例描述：有一个动态生成的导航栏菜单，其中有些菜单有下拉菜单，现在需要将所有菜单的字体颜色改为红色，但排除掉有下拉菜单的菜单及其下拉菜单的字体颜色。

HTML代码：

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品中心</a>
    <ul class="submenu">
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
      <li><a href="#">产品3</a></li>
    </ul>
  </li>
  <li><a href="#">解决方案</a></li>
  <li><a href="#">关于我们</a>
    <ul class="submenu">
      <li><a href="#">公司简介</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </li>
</ul>

CSS代码：

.menu li > a:not(.submenu > li > a){
  color: red;
}

解释：通过:not()伪类，我们可以将带有submenu的li元素及其子元素submenu > li排除在外，而只选择所有li元素子元素aSélection de classe Sélecteur : Sélectionnez via l'attribut class des éléments HTML, par exemple : .myclass{color:blue}

Sélecteur ID : Sélectionnez via l'attribut ID des éléments HTML, par exemple : #myid{color:green}

Sélecteur de caractères génériques : sélectionnez tous les éléments HTML, par exemple : *{color:pink}

Sélecteur d'attribut : Réussite Sélectionnez la valeur d'attribut de l'élément HTML, par exemple : [href="http://www.example.com"]{color:purple}🎜Grâce à ci-dessus sélection de base Avec la combinaison des navigateurs, nous pouvons sélectionner précisément les éléments HTML et modifier leurs styles via CSS. 🎜🎜Sélectionner pour exclure🎜🎜Parfois, nous devons non seulement sélectionner des éléments, mais également exclure certains éléments. À ce stade, la sélection pour exclure est très utile. 🎜🎜Il existe plusieurs façons d'exclure la sélection en CSS : 🎜🎜🎜:pas de pseudo-classe🎜:pseudo-classe du premier enfant🎜:pseudo-classe du dernier enfant🎜 : Pseudo-classe d'enfant unique🎜 Présentons-la tour à tour. 🎜

:not pseudo-class

🎜:not pseudo-class est utilisé pour exclure certains éléments Grâce à une syntaxe simple, nous pouvons exclure des éléments spécifiés dans le sélecteur. 🎜🎜Par exemple, si nous voulons sélectionner tous les éléments p, mais exclure les éléments avec class="no" dans l'élément p, nous peut utiliser la syntaxe suivante : 🎜rrreee🎜 Cela sélectionnera exactement tous les éléments p, mais exclura les éléments avec class="no" et changera la couleur de leur police de texte en bleu. 🎜

:pseudo-classe premier enfant

🎜:pseudo-classe premier enfant signifie sélectionner le premier élément enfant, et peut également être utilisée pour exclure certains éléments. 🎜🎜Par exemple, nous voulons sélectionner le premier élément enfant a de tous les éléments li, mais exclure ceux avec des éléments class="no" , vous pouvez utiliser la syntaxe suivante : 🎜rrreee🎜 De cette façon, vous pouvez sélectionner avec précision le premier élément enfant a de tous les éléments li, mais exclure les éléments avec Class= "no", changez la couleur de la police de leur texte en bleu. 🎜

:pseudo-classe du dernier enfant

🎜:la pseudo-classe du dernier enfant signifie sélectionner le dernier élément enfant et peut également être utilisée pour exclure certains éléments. 🎜🎜Par exemple, nous voulons sélectionner le dernier élément enfant li de tous les éléments ul, mais exclure les éléments avec class="no" , vous pouvez utiliser la syntaxe suivante : 🎜rrreee🎜De cette façon, vous pouvez sélectionner avec précision le dernier élément enfant li de tous les éléments ul, mais exclure les éléments avec la classe =" no", changez la couleur de leur police de texte en bleu. 🎜

:pseudo-classe enfant unique

🎜:pseudo-classe enfant unique signifie sélectionner le seul élément enfant et peut également être utilisée pour exclure certains éléments. 🎜🎜Par exemple, nous voulons sélectionner tous les éléments div, mais sélectionner uniquement le seul élément enfant p et exclure les éléments avec class="no" Pour les éléments code>, vous pouvez utiliser la syntaxe suivante : 🎜rrreee🎜 De cette façon, vous pouvez sélectionner avec précision le seul élément enfant p de tous les éléments div, mais exclure les éléments avec Class="no", changez la couleur de leur police de texte en bleu. 🎜🎜Cas réel🎜🎜Ce qui suit fournit un cas pratique pour montrer comment utiliser l'exclusion de sélection. 🎜🎜Description du cas : Il existe un menu de barre de navigation généré dynamiquement, dont certains ont des menus déroulants. Il est désormais nécessaire de changer la couleur de police de tous les menus en rouge, mais d'exclure les menus avec menus déroulants et la police. couleur des menus déroulants. 🎜🎜Code HTML : 🎜rrreee🎜Code CSS : 🎜rrreee🎜Explication : Grâce à la pseudo-classe :not(), on peut convertir lisous-menu L'élément /code> et ses éléments enfants submenu > li sont exclus, et seuls tous les éléments enfants de l'élément li a sont sélectionnés et leur police la couleur est Changer en rouge. 🎜🎜Ce qui précède représente les connaissances de base et l'application pratique de l'exclusion sélective. Dans le développement actuel, l'exclusion de sélection est une technique très pratique qui peut nous aider à sélectionner des éléments HTML et à modifier leurs styles plus efficacement. 🎜

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!