Heim > Artikel > Web-Frontend > Was sind die häufigsten Probleme mit CSS-Selektoren?

Was sind die häufigsten Probleme mit CSS-Selektoren?

php中世界最好的语言Original: 2018-03-08 15:51:312787Durchsuche

Dieses Mal werde ich Ihnen einige häufige Probleme mit CSS-Selektoren und die Vorsichtsmaßnahmen für den Umgang mit häufigen Problemen mit CSS-Selektoren vorstellen. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

Was sind die gängigen Selektoren?
1.Tag-Selektor
p{ }/Wählen Sie das Element mit dem Tag-Namen p/
2. Klassen-Selektor
.box{ }/Wählen Sie das Element mit der Klasse aus Namensfeld Element/
3. ID-Auswahl
#header{ }/Wählen Sie das Element mit der ID namens header aus/
1.4Platzhalterauswahl
{ }/Wählen Sie alle auf der Seite aus Elemente/
1.5 Selektorpräfix
div.bd{}/Elemente mit Klassennamen bd und Tag div/
1.6Attributselektor
[deaktiviert] {}/Alle auswählen Elemente mit dem Attribut deaktiviert*/

Welche Priorität hat der Selektor?
! important>Inline-Stil>ID-Selektor>Pseudoklasse>Attribut-Selektor>Klassen-Selektor>Element-(Typ-)Selektor>Universal-Selektor(*)>Browser-Nutzungsszenarien zum Anpassen von

Klasse und ID ?
id ruft anhand der bereitgestellten eindeutigen ID-Nummer schnell Tag-Objekte ab. Die Klasse fügt einer Klasse bestimmte Stile hinzu. Wenn Sie Tags für diesen Stil benötigen, können Sie diese Klasse hinzufügen.

Warum müssen Sie bei der Verwendung von CSS-Selektoren geeignete Namespaces abgrenzen?
Um Stilverschmutzung zu verhindern.

Was bedeuten die folgenden Selektoren?

#header{
}/选择id名为header的元素/
.header{
}/选择class名为header的元素/
.header .logo{
}/选择名为header元素内所有名为logo的元素/
.header.mobile{
}/选择class名为header且为mobile的元素/
.header p, .header h3{
}/选择class名为header内所有的p标签和h3标签/
#header .nav>li{
}/选择祖父元素id名为header内父元素class名为nav的标签下/
#header a:hover{
}/选择祖父元素id名为header内a标签被hover的元素/

Listen Sie die Ihnen bekannten Pseudoklassenselektoren auf
:active fügt Stile zu aktivierten Elementen hinzu.
:focus fügt Stile zu Elementen hinzu, die den Tastatureingabefokus haben.
:hover Fügt einem Element einen Stil hinzu, wenn die Maus darüber fährt.
:link Fügen Sie Stile zu nicht besuchten Links hinzu.
:visited fügt Stile zu besuchten Links hinzu.
:first-child fügt dem ersten untergeordneten Element des Elements Stile hinzu.
:lang fügt Stile zu Elementen mit dem angegebenen lang-Attribut hinzu.

Führen Sie den folgenden Code aus, um den Grund für den Ausgabestil zu analysieren.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child  vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1
:first-of-type
{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<div class="item2">ct-item2</div>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child  vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1:first-of-type{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<p class="item2">ct-item2</p>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>

Was sind die Funktionen und Unterschiede zwischen:first-child und :first-of-type?
:first-child entspricht dem ersten untergeordneten Element eines übergeordneten Elements, was möglich ist be said ist das erste untergeordnete Element in der Struktur.
:first-of-type entspricht dem ersten untergeordneten Element desselben Typs unter einem übergeordneten Element.

Wenn Sie auf eine Immobilie stoßen und die Kompatibilität wissen möchten, wo können Sie sie überprüfen?
Überprüfen Sie sie auf caniuse.com.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

JavaScript-Array-String-Mathematische Funktion

Einfacher CSS3-Klick-Antwort-Animationsfall

DOM und Ereignisse von jquery

Das obige ist der detaillierte Inhalt vonWas sind die häufigsten Probleme mit CSS-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der CSS-Methode zum Abfangen mehrzeiliger ZeichenNächster Artikel：Detaillierte Erläuterung der CSS-Methode zum Abfangen mehrzeiliger Zeichen

In Verbindung stehende Artikel

Mehr sehen