Heim >Web-Frontend >CSS-Tutorial >Die Verwendung von Pseudoklassen in CSS (trockene Informationen)
CSS-Pseudoklasse wird verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen. Sie ist dynamisch und bezieht sich auf den Zustand oder die Eigenschaften des aktuellen Elements. Nur wenn ein Element einen bestimmten Status erreicht, erhält es möglicherweise einen Pseudoklassenstil. Wenn sich der Status ändert, verliert es diesen Stil.
Dieser Artikel empfiehlt Ihnen, beim Erstellen der Benutzeroberfläche einfacheres CSS und weniger JS zu verwenden. Eine Möglichkeit, dies zu erreichen, besteht darin, sich mit allem vertraut zu machen, was CSS zu bieten hat. Eine andere Möglichkeit besteht darin, Best Practices zu implementieren und so viel Code wie möglich wiederzuverwenden.
Im Folgenden werden einige Pseudoklassen und ihre Anwendungsfälle vorgestellt, mit denen Sie möglicherweise nicht vertraut sind. Ich hoffe, dass sie Ihnen in Zukunft hilfreich sein werden.
::first-line |. Wählen Sie die erste Textzeile aus. Das Pseudoelement ::first-line wendet Stile auf die erste Zeile eines Elements auf Blockebene an. Die Länge der ersten Zeile hängt von vielen Faktoren ab, darunter der Elementbreite, der Dokumentbreite und der Textgröße des Textes. Das
::first-line-Pseudoelement kann sich nur in einem Blockcontainer befinden, daher kann das ::first-line-Pseudoelement nur einen display-Wert von block, inline-block, table-cell haben oder table-caption es funktioniert. Bei anderen Typen hat ::first-line keine Wirkung.
wird wie folgt verwendet:
p:first-line {
color: lightcoral;
}
CSS-Pseudoelement ::first-letter wählt die erste Zeile von aus ein Element auf Blockebene, der erste Buchstabe von. Die Verwendung ist wie folgt:
<style>
p::first-letter{
color: red;
font-size: 2em;
}
</style>
<p>前端小智，不断努，终身学习者！</p>
::selection| Der vom Benutzer hervorgehobene Teil ::selection Pseudoelement wird auf das Dokument angewendet. Der vom Benutzer hervorgehobene Teil (z. B. der mit einer Maus oder einem anderen Auswahlgerät ausgewählte).
p::selection {
color: #409EFF;}
:root |. Stammelement :root Pseudoklasse entspricht dem Stammelement des Dokumentbaums. Bei HTML stellt :root das Element <html> dar, das mit dem HTML-Selektor identisch ist, außer dass es eine höhere Priorität hat.
ist nützlich, wenn globale CSS-Variablen deklariert werden :root:
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}
:empty | Funktioniert nur, wenn das untergeordnete Element leer ist :empty Pseudoklasse stellt ein Element dar, das hat keine untergeordneten Elemente. Untergeordnete Elemente können nur Elementknoten oder Text (einschließlich Leerzeichen) sein und Kommentare oder Verarbeitungsanweisungen haben keine Auswirkungen darauf.
p:empty {
border: 2px solid orange;
margin-bottom: 10px;
}
<p></p>
<p></p>
<p>
</p>
Nur das erste und das zweite p haben eine Wirkung, weil sie tatsächlich leer sind, das dritte p funktioniert nicht, weil es leer ist eine neue Zeile.
:only-child |. Nur ein untergeordnetes Element ist wirksam. :only-child entspricht einem Element, das keine Geschwisterelemente hat. Der entsprechende Selektor kann auch als :first-child:last-child oder Natürlich wird das Gewicht des ersteren geringer sein. :nth-child(1):nth-last-child(1)
p:only-child{
background: #409EFF;}
<p>
<p>第一个没有任何兄弟元素的元素</p>
</p>
<p>
<p>第二个</p>
<p>第二个</p>
</p>
:first-of-type
aus, um eine Gruppe von Geschwistern darzustellen Elemente Das erste Element seines Typs. :first-of-type
.innerp p:first-of-type {
color: orangered;
}Das Obige bedeutet, dass die Farbe des ersten Elements innerhalb von auf .innerp auf Orange gesetzt wird. p
<p class="innerp"> <p>p1</p> <p>These are the necessary steps</p> <p>hiya</p> <p> Do <em>not</em> push the brake at the same time as the accelerator. </p> <p>p2</p> </p>
:last-of-type
CSS-Pseudoklasse darstellt ( Das letzte Element eines bestimmten Typs in der Liste der untergeordneten Elemente seines übergeordneten Elements. Wenn Code wie :last-of-type verwendet wird, umfasst der Bereich das letzte ausgewählte Element unter allen untergeordneten Elementen des übergeordneten Elements, das letzte untergeordnete Element des untergeordneten Elements usw. Parent tagName:last-of-type
.innerp p:last-of-type {
color: orangered;
}Das Obige bedeutet, dass die Farbe des letzten Elements innerhalb von auf .innerp auf Orange gesetzt wird. p
nth-of-type() | 选择指定类型的子元素:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。
.innerp p:nth-of-type(1) {
color: orangered;
}
<p class="innerp">
<p>p1</p>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<p>p2</p>
</p>
:nth-last-of-type() | 在列表末尾选择类型的子元素:nth-last-of-type(an+b) 这个 CSS 伪类 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处。
.innerp p:nth-last-of-type(1) {
color: orangered;
}
这会选择innerp元素中包含的类型为p元素的列表中的最后一个子元素。
<p class="innerp"> <p>These are the necessary steps</p> <p>hiya</p> <p>p1</p> <p> Do the same. </p> <p>p2</p> </p>
:link | 选择一个未访问的超链接:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。
为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。
a:link {
color: orangered;
}
<a href="/login">Login<a>
:checked | 选择一个选中的复选框:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")。
input:checked {
box-shadow: 0 0 0 3px hotpink;
}
<input type="checkbox" />
大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。
:valid | 选择一个有效的元素:valid CSS 伪类表示内容验证正确的<input> 或其他 <form> 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
input:valid {
box-shadow: 0 0 0 3px hotpink;
}
:invalid | 选择一个无效的元素:invalid CSS 伪类 表示任意内容未通过验证的<input> 或其他 <form> 元素。
input[type="text"]:invalid {
border-color: red;
}
:lang() | 通过指定的lang值选择一个元素:lang() CSS 伪类基于元素语言来匹配页面元素。
/* 选取任意的英文（en)段落 */
p:lang(en) {
quotes: '\201C' '\201D' '\2018' '\2019';
}
:not() | 用来匹配不符合一组选择器的元素CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
来看一个例子：
.innerp :not(p) {
color: lightcoral;
}
<p class="innerp">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>p 1</p>
<p>Paragraph 3</p>
<p>p 2</p>
</p>
p 1 和 p 2会被选中，p 不会被选 中。
推荐教程：《Css》
Das obige ist der detaillierte Inhalt vonDie Verwendung von Pseudoklassen in CSS (trockene Informationen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!