Was sind die häufigsten Probleme mit CSS-Selektoren?
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
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!
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
So ändern Sie den Listenstil in CSS
Aug 17, 2025 am 10:04 AM
Um den CSS-Listenstil zu ändern, verwenden Sie zunächst den Typ Listenstil, um die Kugel- oder Nummerierungsstil zu ändern. 1. Verwenden Sie den Typ Listenstil, um die Kugel von UL auf Scheibe, Kreis oder Quadrat einzustellen, und die Anzahl der OL ist dezimal, unter-alpha, obere Alpha, untere Röme oder Oberroman. 2. Entfernen Sie das Tag vollständig mit Listenstil: Keine. 3. Verwenden Sie das Listen-Stil: URL ('bullet.png'), um es durch ein benutzerdefiniertes Bild zu ersetzen. 4. Verwenden Sie Listen-Stil-Positionen: in
So erstellen Sie eine gepunktete Grenze in CSS
Aug 15, 2025 am 04:56 AM
Verwenden Sie CSS, um gepunktete Grenzen zu erstellen, und stellen Sie einfach das Grenzattribut auf gepunktete fest. Zum Beispiel kann "Border: 3PXDotted#000" dem Element einen 3-Pixel-schwarzen Punktrand hinzufügen. Durch die Einstellung der Randbreite kann die Größe des Punktes geändert werden. Die breiteren Grenzen erzeugen größere Punkte. Sie können gepunktete Grenzen für eine bestimmte Seite festlegen, z. B. "Border-Top: 2PXDottedRed". Gepunktete Grenzen eignen sich für Elemente auf Blockebene wie Div und Eingabe. Sie werden häufig in Fokuszuständen oder bearbeitbaren Bereichen verwendet, um die Zugänglichkeit zu verbessern. Achten Sie auf Farbkontrast. Gleichzeitig präsentiert Dotted eine kreisförmige Punktform. Diese Funktion wird in allen Mainstream -Browsern häufig verwendet.
So erstellen Sie einen reaktionsschnellen Testimonial Slider mit CSS
Aug 12, 2025 am 09:42 AM
Es ist möglich, einen reaktionsschnellen automatischen Karussellschieber mit reinem CSS zu erstellen. Kombinieren Sie einfach die HTML -Struktur, das Flexbox -Layout und die CSS -Animation. 2. Erstellen Sie zuerst einen semantischen HTML -Container, der mehrere Empfehlungsbegriffe enthält. IITEM enthält Referenzinhalt und Autoreninformationen. 3.. Verwenden Sie den übergeordneten Container, um Anzeige zu setzen: Flex, Breite: 300% (drei Folien) und Überlauf auftragen: versteckt, um eine horizontale Anordnung zu erreichen. 4. Verwenden Sie @KeyFrames, um eine Translatex -Transformation von 0% auf -100% zu definieren und Animation zu kombinieren: Scroll15Slinearinfinite, um nahtloses automatisches Scrollen zu erzielen. 5. Medien hinzufügen
So verwenden Sie CSS -Gradienten für Hintergründe
Aug 17, 2025 am 08:39 AM
CsgradientsProvidesmoothColorTransitionSwithoutimages.1.LINEARGRANSITANSCOLORGALONGASTRAILGLINE -UNTERDICECTIONSLIKETOBTOTMORANGLESSHALTS45DEG und SUPPORTMULTIPIPIPECOLORTOPSPORTOPSCUCKICKICKICKLECLECLECLEO
Wie man einen GlaSmorphismus -Effekt mit CSS erzeugt
Aug 22, 2025 am 07:54 AM
Um einen Gla-Mimikry-Effekt von CSS zu erzeugen, müssen Sie Backdrop-Filter verwenden, um Hintergrundunschärfe zu erzielen, einen durchscheinenden Hintergrund wie RGBA (255,255,255,0.1) festzulegen, subtile Grenzen und Schatten hinzuzufügen, um das Gefühl der Hierarchie zu verbessern, und sicherzustellen, dass der visuelle Inhalt hinter den Elementen genügend visuelle Inhalt gibt. 1. Verwenden Sie Backdrop-Filter: Blur (10px), um den Hintergrundinhalt zu verwischen; 2. Verwenden Sie RGBA oder HSLA, um den transparenten Hintergrund zu definieren, um den Grad der Transparenz zu steuern. 3. Fügen Sie 1pxsolidrgba (255.255.255,0,3) Grenzen und Box-Shadow hinzu, um die dreidimensionale zu verbessern. V. 5. Es ist mit alten Browsern kompatibel
Wie man den Cursor in CSS ändert
Aug 16, 2025 am 05:00 AM
UseBuilt-Incursortypes LikePointer, Hilfe, Ornot-allowedtoprovideimmediatevisualFeedbackfordFerentIntiveRections.2.ApplyCustomCursorimagesWithTheCursorPropertyuSeusions, optionalSpecifingAtaTandalwayssincludingafallbacklikeAumAntoorPointer.fol
So verwenden Sie Grid-Template-Areas in CSS
Aug 22, 2025 am 07:56 AM
Thegrid-template-areasPropertyAllowsDevelopStoCreatINTItIPISIVE, readableLayoutsByDefiningNamedGridareas; EverStringRepesentsArowandachwordacolumnCell, mit ggrid-areaMameSonchildelementsMatchingThoseInthetemplate, solches "Headerheaderheaderheaderader"
So fügen Sie einen Boxschatten in CSS hinzu
Aug 18, 2025 am 11:39 AM
Verwenden Sie zum Hinzufügen von Kastenschatten das Box-Shadow-Attribut. 1. Die grundlegende Syntax ist Box-Shadow: Horizontaler Offset vertikaler Offset-Unschärfe-Radius-Expansionsradius-Schatten in Farbe; 2. Die ersten drei Werte sind erforderlich, der Rest ist optional; 3.. Verwenden Sie RGBA () oder HSLA (), um transparente Wirkung zu erzielen; 4. Der positive Expansionsradius erweitert Schatten und der negative Wert wird verringert. 5. Mehrere Schatten können durch Kommas -Trennung hinzugefügt werden. 6. Überbeanspruchung sollte vermieden werden, um sicherzustellen, dass die Sichtbarkeit auf unterschiedlichem Hintergrund getestet wird. Dieses Attribut wird vom Browser gut unterstützt, und eine angemessene Verwendung kann die Designstruktur verbessern.
