So verwenden Sie den Selektor, um Elemente in CSS auszuschließen

CSS ist eine der wichtigsten Fähigkeiten in der Front-End-Entwicklung. Neben der grundlegenden Auswahl von Elementen und der Änderung von Stilen sind Auswahl und Ausschluss auch ein sehr wichtiger Wissenspunkt in CSS. In diesem Artikel werden Auswahlausschlüsse in CSS erläutert und praktische Beispiele als Referenz bereitgestellt.

Einführung in Selektoren

Bevor wir Auswahl und Ausschluss lernen, wollen wir zunächst die Grundlagen von CSS-Selektoren verstehen.

CSS-Selektoren werden zur Auswahl von HTML-Elementen verwendet. In CSS gibt es viele Arten von Selektoren, z. B. Basisselektoren, hierarchische Selektoren, Pseudoklassenselektoren usw. Diese Selektoren haben unterschiedliche Verwendungszwecke und Syntax.

Im Folgenden sind verschiedene Arten von Grundselektoren aufgeführt:

• Tag-Selektor: Wählen Sie über den Tag-Namen des HTML-Elements aus, zum Beispiel: 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元素子元素aKlassenauswahl Selektor: Wählen Sie über das Klassenattribut von HTML-Elementen aus, zum Beispiel: .myclass{color:blue}

ID-Selektor: Wählen Sie über das ID-Attribut von HTML-Elementen aus, zum Beispiel: #myid{color:green}

Wildcard-Selektor: Alle HTML-Elemente auswählen, zum Beispiel: *{color:pink}

Attribute-Selektor: Bestanden Wählen Sie den Attributwert des HTML-Elements aus, zum Beispiel: [href="http://www.example.com"]{color:purple}🎜Through the Oben grundlegende Auswahl Mit der Kombination von Browsern können wir HTML-Elemente präzise auswählen und ihre Stile über CSS ändern. 🎜🎜Ausschließen auswählen🎜🎜Manchmal müssen wir nicht nur Elemente auswählen, sondern auch einige Elemente ausschließen. Zu diesem Zeitpunkt ist die Auswahl zum Ausschließen sehr nützlich. 🎜🎜Es gibt mehrere Möglichkeiten, die Auswahl in CSS auszuschließen: 🎜🎜🎜:keine Pseudoklasse🎜:Pseudoklasse des ersten Kindes🎜:Pseudoklasse des letzten Kindes🎜: Nur-Kind-Pseudoklasse🎜 Lassen Sie uns sie der Reihe nach vorstellen. 🎜

:not pseudo-class

🎜:not pseudo-class wird verwendet, um bestimmte Elemente auszuschließen. Durch einfache Syntax können wir bestimmte Elemente im Selektor ausschließen. 🎜🎜Wenn wir beispielsweise alle p-Elemente auswählen, aber Elemente mit class="no" im p-Element ausschließen möchten, müssen wir Sie können die folgende Syntax verwenden: 🎜rrreee🎜 Dadurch werden genau alle p-Elemente ausgewählt, Elemente mit class="no" werden jedoch ausgeschlossen und ihre Textschriftfarbe wird in Blau geändert. 🎜

:first-child pseudo-class

🎜:first-child pseudo-class bedeutet die Auswahl des ersten untergeordneten Elements und kann auch zum Ausschließen bestimmter Elemente verwendet werden. 🎜🎜Zum Beispiel möchten wir das erste untergeordnete Element a aller li-Elemente auswählen, aber diejenigen mit class="no"-Elementen ausschließen können Sie die folgende Syntax verwenden: 🎜rrreee🎜 Auf diese Weise können Sie das erste untergeordnete Element a aller li-Elemente genau auswählen, aber Elemente mit Class= ausschließen „nein“-Elemente ändern ihre Textschriftfarbe in Blau. 🎜

:last-child pseudo-class

🎜:last-child pseudo-class bedeutet die Auswahl des letzten untergeordneten Elements und kann auch verwendet werden, um bestimmte Elemente auszuschließen. 🎜🎜Zum Beispiel möchten wir das letzte untergeordnete Element li aller ul-Elemente auswählen, aber Elemente mit class="no" ausschließen. Sie können die folgende Syntax verwenden: 🎜rrreee🎜Auf diese Weise können Sie das letzte untergeordnete Element li aller ul-Elemente genau auswählen, aber Elemente mit class ausschließen =" no"-Elemente ändern ihre Textschriftfarbe in Blau. 🎜

:only-child pseudo-class

🎜:only-child pseudo-class bedeutet die Auswahl des einzigen untergeordneten Elements und kann auch verwendet werden, um bestimmte Elemente auszuschließen. 🎜🎜Zum Beispiel möchten wir alle div-Elemente auswählen, aber nur das einzige untergeordnete Element p auswählen und Elemente mit class="no" ausschließen. code>-Element können Sie die folgende Syntax verwenden: 🎜rrreee🎜 Auf diese Weise können Sie das einzige untergeordnete Element p aller div-Elemente genau auswählen, aber die Elemente mit >Class="no"-Elemente, ändern Sie ihre Textschriftfarbe in Blau. 🎜🎜Eigentlicher Fall🎜🎜Im Folgenden finden Sie einen praktischen Fall, der zeigt, wie der Auswahlausschluss verwendet wird. 🎜🎜Fallbeschreibung: Es gibt ein dynamisch generiertes Navigationsleistenmenü, von dem einige Dropdown-Menüs haben. Jetzt ist es notwendig, die Schriftfarbe aller Menüs auf Rot zu ändern, aber die Menüs mit Dropdown-Menüs und die Schriftart auszuschließen Farbe der Dropdown-Menüs. 🎜🎜HTML-Code: 🎜rrreee🎜CSS-Code: 🎜rrreee🎜Erläuterung: Durch die Pseudoklasse :not() können wir lisubmenu konvertieren Das /code>-Element und seine untergeordneten Elemente submenu > li werden ausgeschlossen und nur alle untergeordneten Elemente li a und ihre Schriftart werden ausgewählt Die Farbe wechselt zu Rot. 🎜🎜Das Obige ist das Grundwissen und die praktische Anwendung des selektiven Ausschlusses. In der tatsächlichen Entwicklung ist der Auswahlausschluss eine sehr praktische Technik, die uns dabei helfen kann, HTML-Elemente auszuwählen und ihre Stile effizienter zu ändern. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Selektor, um Elemente in CSS auszuschließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!