Heim >Web-Frontend >CSS-Tutorial >Letzter untergeordneter und letzter Typselektor in SASS
Letzter untergeordneter und letzter Typselektor in SASS
- 王林nach vorne
- 2023-09-17 12:05:02757Durchsuche
SASS bietet über einfaches CSS verschiedene Funktionen zum Schreiben von einfachem und wartbarem Code, und erweiterte Selektoren sind eine davon. SASS enthält das letzte Kind und den letzten Typselektor, die wir in diesem Tutorial besprechen werden.
Der letzte Kinderselektor in SASS
Mit dem „Last-Child“-Selektor können Entwickler das letzte Element innerhalb eines übergeordneten Elements auswählen. Darüber hinaus können Sie das letzte HTML-Element unabhängig von seinem Typ auswählen. Wenn das letzte Element verschachtelte untergeordnete Elemente enthält, wird der Stil auch auf die verschachtelten Elemente angewendet, da diese Teil des letzten untergeordneten Elements sind.
Grammatik
Benutzer können den „Last-Child“-Selektor in CSS gemäß der folgenden Syntax verwenden.
.element :last-child {
/* CSS code */
}
Mit der obigen Syntax wird das letzte untergeordnete Element des HTML-Elements ausgewählt, das den Klassennamen „element“ enthält.
Beispiel
In der Datei index.html haben wir das div-Element „container“ erstellt und zwei Absätze und ein div-Element als letztes untergeordnetes Element hinzugefügt.
In der SCSS-Datei verwenden wir den „Last-Child“-Selektor, um das letzte Element des Container-Div-Elements auszuwählen. In der Ausgabe können wir beobachten, dass der Stil auf das untergeordnete div-Element angewendet wurde.
Dateiname – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "container">
<p> First paragraph </p>
<p> Last paragraph </p>
<div> Not a paragraph but last child. </div>
</div>
</body>
</html>
Dateiname – style.scss
.container :last-child {
color: red;
}
Nach der Kompilierung wird der folgende Code generiert.
Dateiname – style.css
.container :last-child {
color: red;
}
Beispiel
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.container :last-child {
color: red;
}
</style>
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS </h2>
<div class = "container">
<p> First paragraph </p>
<p> Last paragraph </p>
<div> Not a paragraph but last child. </div>
</div>
</body>
</html>
Beispiel
Im folgenden Beispiel haben wir mehrere untergeordnete div-Elemente innerhalb des übergeordneten div-Elements hinzugefügt. Darüber hinaus haben wir im letzten div-Element mehrere Ebenen verschachtelter untergeordneter Elemente hinzugefügt.
In der SCSS-Datei verwenden wir den Last-Child-Selektor, um das letzte Element des übergeordneten div-Elements auszuwählen. In der Ausgabe kann der Benutzer beobachten, dass der Stil auch auf die verschachtelten untergeordneten Elemente des letzten untergeordneten Elements angewendet wird.
Dateiname – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "parent">
<div class = "child"> First </div>
<div class = "child"> Second </div>
<div class = "child"> Third
<div class = "nested-level-1"> Nested Level 1
<div class = "nested-level-2"> Nested Level 2 </div>
</div>
</div>
</div>
</body>
</html>
Dateiname – style.scss
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
Nach der Kompilierung wird der folgende Code generiert.
Dateiname – style.css
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
Beispiel
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.parent :last-child {
font-size: 3rem;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Using the <i> :last-child selector </i> in SCSS. </h2>
<div class = "parent">
<div class = "child"> First </div>
<div class = "child"> Second </div>
<div class = "child"> Third
<div class = "nested-level-1"> Nested Level 1
<div class = "nested-level-2"> Nested Level 2 </div>
</div>
</div>
</div>
</body>
</html>
Der letzte Typselektor in SASS
Mit dem „Last-of-Type“-Selektor können Entwickler das letzte Element eines bestimmten Typs innerhalb eines übergeordneten div-Elements auswählen. Daher müssen wir den Elementtyp mithilfe des Selektors angeben, wenn wir den „Last-of-Type“-Selektor verwenden. Wir können den Elementtyp anhand des Klassennamens, Tagnamens, Elementnamens, der ID usw. angeben.
Grammatik
Benutzer können den „Last-of-Type“-CSS-Selektor von SASS gemäß der folgenden Syntax verwenden.
p:last-of-type {
/* CSS code */
}
Die obige Syntax wählt das letzte „p“-Element im übergeordneten Element aus.
Beispiel
Im folgenden Beispiel haben wir ein div-Element mit einem Klassennamen erstellt, der „multiple“ lautet. Danach haben wir zwei Absatzelemente und das letzte div-Element eingefügt.
In SASS verwenden wir den „Last-of-Type“-Selektor, um das letzte „p“-Element in einem „mehrfachen“ Element auszuwählen. Der Benutzer kann in der Ausgabe beobachten, dass der Stil auf das letzte „p“-Element angewendet wird, obwohl es nicht das letzte untergeordnete Element ist.
Dateiname – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class = "multiple">
<p class = "single"> First </p>
<p class = "single"> Second </p>
<div class = "last">
Last element
</div>
</div>
</body>
</html>
Dateiname – style.scss
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
Nach der Kompilierung wird der folgende Code generiert.
Dateiname – style.css
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
Beispiel
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.multiple p:last-of-type {
color: blue;
font-size: 3rem;
}
</style>
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class="multiple">
<p class="single"> First </p>
<p class="single"> Second </p>
<div class="last">
Last element
</div>
</div>
</body>
</html>
Beispiel
Im folgenden Beispiel haben wir mehrere div-Elemente erstellt, die die Klasse „fruit“ enthalten. Zusätzlich erstellen wir das letzte div-Element, das den Klassennamen „bike“ enthält.
Im SASS-Code verwenden wir den Selektor „.fruit :last-of-type“, um das letzte Element auszuwählen, das den Klassennamen „fruit“ enthält. In der Ausgabe kann der Benutzer beobachten, dass das vorletzte div-Element formatiert wird, welches das letzte Element ist, das den Klassennamen „fruit“ enthält.
Dateiname – index.html
<html>
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class = "fruit">
Apple
</div>
<div class = "fruit">
<ul>
<li> Banana </li>
<li> Orange </li>
<li> Watermelon </li>
</ul>
</div>
<div class = "bike">
This is bike div.
</div>
</body>
</html>
Dateiname – style.scss
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
Nach der Kompilierung wird der folgende Code generiert.
Dateiname – style.css
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
Beispiel
<html>
<head>
<style>
/* style.css obtained from filename – style.scss */
.fruit :last-of-type {
background-color: orange;
color: white;
font-size: 2rem;
}
</style>
</head>
<body>
<h2> Using the <i> :last-of-type selector </i> in SCSS. </h2>
<div class="fruit">
Apple
</div>
<div class="fruit">
<ul>
<li> Banana </li>
<li> Orange </li>
<li> Watermelon </li>
</ul>
</div>
<div class="bike">
This is bike div.
</div>
</body>
</html>
Der Benutzer hat gelernt, wie man die Selektoren „last-child“ und „last-of-type“ in SASS verwendet. Der „last-child“-Selektor wird verwendet, um unter allen Bedingungen das letzte Element im übergeordneten Element auszuwählen. Das Element „last-of-type“ wird verwendet, um das letzte untergeordnete Element eines bestimmten Typs innerhalb des übergeordneten Elements auszuwählen.
Das obige ist der detaillierte Inhalt vonLetzter untergeordneter und letzter Typselektor in SASS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!