Detaillierte Analyse der Funktionen und Vorteile erweiterter CSS-Selektoren

Eingehende Analyse der Funktionen und Vorteile erweiterter CSS-Selektoren

Einführung:
CSS ist ein wesentlicher Bestandteil der Webentwicklung. CSS kann verwendet werden, um Webseiten Stil und Layout zu verleihen. Der Selektor ist ein sehr wichtiger Teil von CSS, der bestimmt, welche Elemente auf der Webseite CSS-Regeln anwenden. In CSS sind wir mit einfachen Selektoren, hierarchischen Selektoren, Pseudoklassenselektoren usw. vertraut. Zusätzlich zu diesen allgemeinen Selektoren bietet CSS auch einige erweiterte Selektoren. In diesem Artikel werden die Eigenschaften und Vorteile der erweiterten CSS-Selektoren eingehend analysiert und spezifische Codebeispiele bereitgestellt.

1. Attributselektor
Der Attributselektor ist ein Selektor, der Elemente anhand ihrer Attribute auswählen kann. Es kann die erforderlichen Elemente basierend auf ihren Attributwerten auswählen. Attributselektoren haben die folgenden Formen:

1. [Attribut]: Elemente mit angegebenen Attributen auswählen
2. [Attribut=Wert]: Elemente mit angegebenen Attributwerten auswählen
3. [Attribut~=Wert]: Elemente mit angegebenen Attributen auswählen Elemente mit Attributwerten. Der Attributwert besteht aus mehreren durch Leerzeichen getrennten Werten.
4. [Attribut|=Wert]: Wählen Sie Elemente mit dem angegebenen Attributwert aus oder beginnen Sie mit dem angegebenen Attributwert „-“
5. [Attribut^=Wert]: Elemente auswählen, die mit dem angegebenen Attributwert beginnen
6. [Attribut$=Wert]: Elemente auswählen, die mit dem angegebenen Attributwert enden
7. [Attribut*=Wert]: Elemente auswählen, die Folgendes enthalten angegebenes Attribut Wertelement

Codebeispiel:

/* 选择所有具有title属性的元素 */
[title] {
  color: blue;
}

/* 选择具有title属性且属性值为"example"的元素 */
[title="example"] {
  background-color: yellow;
}

/* 选择具有class属性且属性值包含"box"的元素 */
[class~="box"] {
  border: 1px solid black;
}

/* 选择具有id属性且属性值以"container"开头的元素 */
[id^="container"] {
  background-color: gray;
}

/* 选择具有href属性且属性值以".com"结尾的a元素 */
a[href$=".com"] {
  color: green;
}

/* 选择具有src属性且属性值包含"logo"的img元素 */
img[src*="logo"] {
  width: 100px;
  height: 100px;
}

2. Struktureller Pseudoklassenselektor
Der strukturelle Pseudoklassenselektor ist ein Selektor, der Elemente basierend auf ihrer Positionsbeziehung im Dokument auswählt. Es kann das erste untergeordnete Element, das letzte untergeordnete Element, das n-te untergeordnete Element usw. auswählen. Strukturelle Pseudoklassenselektoren haben die folgenden Formen:

1. :first-child: Wählen Sie das erste untergeordnete Element des Elements aus
2. :last-child: Wählen Sie das letzte untergeordnete Element des Elements aus
3. :nth-child(n) : Wählen Sie das n-te Unterelement des Elements aus. n kann eine bestimmte Zahl, ein Schlüsselwort (z. B. „gerade“, „ungerade“) oder eine Formel (z. B. „2n“, „3n+1“) sein. erstes Element: Wählen Sie das erste Element unter allen Elementen desselben Typs aus, die dasselbe übergeordnete Element wie dieses Element haben.
4. : letztes Element: Wählen Sie das letzte Element unter allen Elementen desselben Typs aus, die dasselbe haben übergeordnetes Element als dieses Element
5. :nth-of-type(n): Wählen Sie das n-te Element unter allen Elementen desselben Typs aus, die dasselbe übergeordnete Element wie das Element haben
6. :nth-last-child(n): Auswählen das n-te untergeordnete Element vom letzten bis zum Element
7. ; Ein Selektor ist ein Selektor, der zum Auswählen eines bestimmten Teils eines Elements und nicht des gesamten Elements verwendet wird. Es kann Inhalte vor, hinter oder an einer bestimmten Position eines Elements auswählen oder einige Spezialeffekte erzeugen. Gängige Pseudoelementselektoren haben die folgenden Formen:
8. ::before: fügt den generierten Inhalt vor dem Elementinhalt ein

::after: fügt den generierten Inhalt nach dem Elementinhalt ein

::first-letter: wählt den ersten aus Buchstabe des Elementinhalts

::first-line: Wählen Sie die erste Zeile des Elementinhalts aus

1. ::selection: Der Stil, der angewendet wird, wenn der Text ausgewählt wird
2. ::placeholder: Wählen Sie den Platzhaltertext des Formularsteuerelements aus
Codebeispiel:

4. /* 选择第一个子元素，并设置颜色为红色 */
   li:first-child {
     color: red;
   }
   
   /* 选择最后一个子元素，并设置背景颜色为黄色 */
   li:last-child {
     background-color: yellow;
   }
   
   /* 选择偶数序号的子元素，并设置颜色为绿色 */
   li:nth-child(even) {
     color: green;
   }
   
   /* 选择第三个子元素，并设置字体大小为20px */
   li:nth-child(3) {
     font-size: 20px;
   }
   
   /* 选择第一个p元素，并设置边框为1px实线红色 */
   p:first-of-type {
     border: 1px solid red;
   }
   
   /* 选择最后一个p元素，并设置边框为1px实线蓝色 */
   p:last-of-type {
     border: 1px solid blue;
   }
   
   /* 选择li的倒数第二个子元素，并设置背景颜色为灰色 */
   li:nth-last-child(2) {
     background-color: gray;
   }
   
   /* 选择同类型元素中倒数第一个元素，并设置颜色为橙色 */
   span:nth-last-of-type(1) {
     color: orange;
   }

Zusammenfassung:
5. Durch strukturelle Pseudoklassenselektoren, Attributselektoren und Pseudoelementselektoren können wir Elemente in Webseiten flexibler auswählen und verarbeiten und eine feinere Stilkontrolle erreichen. Diese erweiterten Selektoren bieten Entwicklern mehr Auswahlmöglichkeiten und leistungsstarke Stilausdrucksfunktionen, wodurch die Anwendung von CSS in der Webentwicklung kreativer und flexibler wird. In der tatsächlichen Entwicklung kann die rationelle Verwendung dieser erweiterten Selektoren die Arbeitseffizienz und die Lesbarkeit des Codes erheblich verbessern.
6. (Wortanzahl: 1500)

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Funktionen und Vorteile erweiterter CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!