So verwenden Sie Attributselektoren und Pseudoklassenselektoren-CSS-Tutorial-php.cn

So verwenden Sie Attributselektoren und Pseudoklassenselektoren

php中世界最好的语言

Freigeben： 2017-11-24 10:00:43

Original

2380 Leute haben es durchsucht

Heute erzählen wir Ihnen von der Verwendung und den damit verbundenen Zusammenhängen und Unterschieden zwischen dem Attributselektor und dem Pseudo-Klassenselektor. Hier ist ein kleines Beispiel.

Attributauswahl:

[attr~="value"] Wort Wort Leerzeichen Wort Wort muss gültig sein

[attr|="value"] Wert beginnt mit oder Wert - Wort

Hinweis:

Attributauswahl ist schwierig, Regel Ausdruck zu verwenden, um die ausgewählten Elemente zu identifizieren, was effizienter ist

Pseudoklassenselektor :

: before

: after

:lang(val) val/val-word

:nth-child(n) nfrom Beginnend mit 1 ungerade Basis gerade gerade

:nth-of-type(n)-Selektor stimmt mit jedem Element überein, das das N-te untergeordnete Element eines bestimmten Typs des übergeordneten Elements ist.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
--->
<div>
       <p>aaa</p>
       <p>aaa</p>
       <p>aaa</p>
       <p>aaa</p>
</div>
</body>
</html>
Css部分：
@charset "utf-8";
/* CSS Document */
/*
p:before{
       content:"ccc"; 
}
 
p:lang(en){
       border:1px solid #ff0000;  
}
p:nth-child(even){
       background:#F00; 
}
*/
p:nth-of-type(3){  /* p标记的父元素 下的 第3个p元素*/
       background:#F00; 
}

Nach dem Login kopieren

Verwandte Lektüre:

So verbergen Sie Inhalte, die über ein DIV hinausgehen

Welche Techniken gibt es für das CSS-Layout?

In CSS So legen Sie den Schriftstil fest

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Attributselektoren und Pseudoklassenselektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!