Heim > Artikel > Web-Frontend > 16 CSS-Pseudoklassen, die die Layout-Effizienz verbessern, die Sie vielleicht nicht kennen! !
16 CSS-Pseudoklassen, die die Layout-Effizienz verbessern, die Sie vielleicht nicht kennen! !
- 青灯夜游nach vorne
- 2021-03-03 10:19:251688Durchsuche
In diesem Artikel werden 16 CSS-Pseudoklassen vorgestellt, mit denen Sie die Layouteffizienz schnell verbessern können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
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.
【Empfohlenes Tutorial: CSS-Video-Tutorial】
Dieser Artikel ermutigt Sie, beim Erstellen der Benutzeroberfläche bis zu einem gewissen Grad 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
::first-line | 选择文本的第一行::first-line 伪元素在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。
::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用。在其他的类型中，::first-line 是不起作用的。
用法如下：
p:first-line {
color: lightcoral;
}::first-letter | 选择这一行的第一字
CSS 伪元素 ::first-letter会选中某块级元素第一行的第一个字母。用法如下：
<style>
p::first-letter{
color: red;
font-size: 2em;
}
</style>
<p>前端小智，不断努，终身学习者！</p>::selection| 被用户高亮的部分
::selection 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
div::selection {
color: #409EFF;
}:root | 根元素
:root 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。
在声明全局 CSS 变量时 :root 会很有用：
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}:empty | 仅当子项为空时才有作用
:empty 伪类代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）,注释或处理指令都不会产生影响。
div:empty {
border: 2px solid orange;
margin-bottom: 10px;
}
<div></div>
<div></div>
<div>
</div>只有第一个和第二个div有作用，因为它们确实是空的，第三个 div 没有作用，因为它有一个换行。
:only-child | 只有一个子元素才有作用
:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点。
p:only-child{
background: #409EFF;
}
<div>
<p>第一个没有任何兄弟元素的元素</p>
</div>
<div>
<p>第二个</p>
<p>第二个</p>
</div>:first-of-type | 选择指定类型的第一个子元素
:first-of-type表示一组兄弟元素中其类型的第一个元素。
.innerDiv p:first-of-type {
color: orangered;
}上面表示将 .innerDiv 内的第一个元素为 p 的颜色设置为橘色。
<div class="innerDiv">
<div>Div1</div>
<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>
<div>Div2</div>
</div>
:last-of-type | 选择指定类型的最后一个子元素
:last-of-type CSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。
.innerDiv p:last-of-type {
color: orangered;
}上面表示将 .innerDiv 内的的最后一个元素为 p::first-line Pseudoelement in einem Block aus. Level-Element Die erste Zeile des Anwendungsstils. Die Länge der ersten Zeile hängt von vielen Faktoren ab, darunter der Elementbreite, der Dokumentbreite und der Textgröße des Textes.
::first-line-Pseudoelement kann nur in einem Blockcontainer sein, daher kann ::first-line-Pseudoelement nur in einem sein displayWerte sind nützlich in block, inline-block, table-cell oder table-caption Code>. Bei anderen Typen hat <code>::first-line keine Auswirkung. 
.innerDiv p:nth-of-type(1) {
color: orangered;
}
<div class="innerDiv">
<div>Div1</div>
<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>
<div>Div2</div>
</div>🎜::first-letter |. Wählen Sie den ersten Buchstaben dieser Zeile aus🎜CSS-Pseudoelement ::first-letter wird Wählen Sie einen bestimmten Block aus. Der erste Buchstabe der ersten Reihe von Ebenenelementen. Die Verwendung ist wie folgt: 🎜.innerDiv p:nth-last-of-type(1) {
color: orangered;
}🎜
🎜🎜::selection| Der vom Benutzer hervorgehobene Teil
🎜::selection Pseudoelement wird angewendet Der vom Benutzer hervorgehobene Teil des Dokuments (z. B. der mit einer Maus oder einem anderen Auswahlgerät ausgewählte). 🎜<div class="innerDiv">
<p>These are the necessary steps</p>
<p>hiya</p>
<div>Div1</div>
<p>
Do the same.
</p>
<div>Div2</div>
</div>🎜
🎜🎜 🎜:root |. Wurzelelement🎜:root Pseudoklasse entspricht dem Wurzelelement des Dokumentbaums. Für HTML stellt :root das Element dar, das mit dem HTML-Selektor identisch ist, außer dass es eine höhere Priorität hat. 🎜🎜<code>:root ist nützlich, wenn globale CSS-Variablen deklariert werden: 🎜a:link {
color: orangered;
}
<a href="/login">Login<a>🎜🎜:empty | Funktioniert nur, wenn das untergeordnete Element leer ist🎜:empty stellt ein Element dar, das keine untergeordneten Elemente hat. Untergeordnete Elemente können nur Elementknoten oder Text (einschließlich Leerzeichen) sein und Kommentare oder Verarbeitungsanweisungen haben keine Auswirkungen darauf. 🎜input:checked {
box-shadow: 0 0 0 3px hotpink;
}
<input type="checkbox" />🎜
🎜🎜 Nur das erste und das zweite div haben eine Wirkung, da sie tatsächlich leer sind. Das dritte div hat keine Wirkung, da es eine neue Zeile enthält. 🎜🎜🎜:only-child |. Nur ein untergeordnetes Element ist wirksam🎜:only-child entspricht einem Element ohne Geschwisterelemente Der entsprechende Selektor kann natürlich auch als :first-child:last-child oder :nth-child(1):nth-last-child(1) geschrieben werden. Das Gewicht des ersteren wird geringer sein. 🎜input:valid {
box-shadow: 0 0 0 3px hotpink;
}🎜
🎜🎜 🎜:first-of-type |. Wählen Sie das erste untergeordnete Element des angegebenen Typs🎜:first-of-type stellt eine Gruppe von dar Brüder Das erste Element seiner Art unter den Elementen. 🎜input[type="text"]:invalid {
border-color: red;
}🎜Das Obige bedeutet, die Farbe des ersten Elements in .innerDiv auf p auf Orange zu setzen. 🎜/* 选取任意的英文（en)段落 */
p:lang(en) {
quotes: '1C' '1D' '18' '19';
}🎜🎜🎜 🎜:last-of-type |. Wählen Sie das letzte untergeordnete Element des angegebenen Typs aus🎜:last-of-type CSS-Pseudoklasse stellt das letzte Element des angegebenen Typs in der Liste der untergeordneten Elemente (seines übergeordneten Elements) dar. Wenn der Code wie folgt lautet: Parent tagName:last-of-type, umfasst der Bereich das letzte ausgewählte Element unter allen untergeordneten Elementen des übergeordneten Elements, das letzte untergeordnete Element des untergeordneten Elements usw. 🎜.innerDiv :not(p) {
color: lightcoral;
}
<div class="innerDiv">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>Div 1</div>
<p>Paragraph 3</p>
<div>Div 2</div>
</div>🎜Das Obige bedeutet, die Farbe des letzten Elements in .innerDiv auf p auf Orange zu setzen. 🎜🎜🎜🎜🎜🎜
<strong>:nth-of-type()</strong> | 选择指定类型的子元素
:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。
.innerDiv p:nth-of-type(1) {
color: orangered;
}
<div class="innerDiv">
<div>Div1</div>
<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>
<div>Div2</div>
</div>
:nth-last-of-type() | 在列表末尾选择类型的子元素
:nth-last-of-type(an+b) 这个 CSS 伪类 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处。
.innerDiv p:nth-last-of-type(1) {
color: orangered;
}这会选择innerDiv元素中包含的类型为p元素的列表中的最后一个子元素。
<div class="innerDiv">
<p>These are the necessary steps</p>
<p>hiya</p>
<div>Div1</div>
<p>
Do the same.
</p>
<div>Div2</div>
</div>
: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></form> 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
input:valid {
box-shadow: 0 0 0 3px hotpink;
}
:invalid | 选择一个无效的元素
:invalid CSS 伪类 表示任意内容未通过验证的 <input> 或其他 <form></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）。
来看一个例子：
.innerDiv :not(p) {
color: lightcoral;
}
<div class="innerDiv">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>Div 1</div>
<p>Paragraph 3</p>
<div>Div 2</div>
</div>
Div 1 和 Div 2会被选中，p 不会被选 中。
原文地址：https://blog.bitsrc.io/css-pseudo-selectors-you-never-existed-b5c0ddaa8116
作者：Chidume Nnamdi
译文地址：https://segmentfault.com/a/1190000024444838
更多编程相关知识，请访问：编程视频！！
Das obige ist der detaillierte Inhalt von16 CSS-Pseudoklassen, die die Layout-Effizienz verbessern, die Sie vielleicht nicht kennen! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!