Home > Article > Web Front-end > 16 CSS pseudo-classes that improve layout efficiency that you may not know! !
This article introduces 16 CSS pseudo-classes to help you quickly improve layout efficiency. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
css pseudo-class is used to add special effects to certain selectors. It is dynamic and refers to the state or characteristics of the current element. Only when an element reaches a specific state, it may get a pseudo-class style; when the state changes, it will lose this style.
[Recommended tutorial: CSS video tutorial]
This article encourages you to use simpler CSS and less JS when building UI to a certain extent. Getting familiar with everything CSS has to offer is one way to achieve this, another is to implement best practices and reuse as much code as possible.
Next, I will introduce some pseudo-classes and their use cases that you may not be familiar with. I hope it will be helpful to you in the future.
::first-line | Select the first line of text ::first-line The pseudo element is in Applies styles to the first row of a block-level element. The length of the first line depends on many factors, including the element width, the document width, and the text size of the text.
::first-line Pseudo elements can only be in block containers, so ::first-line pseudo elements can only be in one display Values are useful in block, inline-block, table-cell or table-caption. In other types, ::first-line has no effect.
Usage is as follows:
p:first-line {
color: lightcoral;
}CSS pseudo element::first -letter will select the first letter of the first line of a block-level element. The usage is as follows:
<style>
p::first-letter{
color: red;
font-size: 2em;
}
</style>
<p>前端小智，不断努，终身学习者！</p>
::selection| The part highlighted by the user The ::selection pseudo-element applies to the portion of the document that is highlighted by the user (such as the portion selected using the mouse or other selection device).
div::selection {
color: #409EFF;
}
:root | Root element :root Pseudo class matching The root element of the document tree. For HTML, :root represents the element, which is the same as the html selector except that it has a higher priority.
:root can be useful when declaring global CSS variables:
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}:empty | Only if the child is empty Only then does it work:empty The pseudo class represents an element that has no child elements. Child elements can only be element nodes or text (including spaces), and comments or processing instructions will not affect it.
div:empty {
border: 2px solid orange;
margin-bottom: 10px;
}
<div></div>
<div></div>
<div>
</div>Only the first and second div have an effect because they are indeed empty, the third div has no effect because it has a newline.
:only-child | Only one child element is effective :only-child matches no siblings The element of the element. The equivalent selector can also be written as :first-child:last-child or :nth-child(1):nth-last-child(1), Of course, the weight of the former will be lower.
p:only-child{
background: #409EFF;
}
<div>
<p>第一个没有任何兄弟元素的元素</p>
</div>
<div>
<p>第二个</p>
<p>第二个</p>
</div>
:first-of-type | Select the first child element of the specified type :first-of-type represents the first element of its type in a group of sibling elements.
.innerDiv p:first-of-type {
color: orangered;
}The above means setting the color of the first element in .innerDiv to p to orange.
<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 | Select the last child element of the specified type:last-of-type CSS pseudo-class represents the last element of a given type in a list of child elements (of its parent element). When the code is like Parent tagName:last-of-type, the scope includes the last selected element among all the child elements of the parent element, the last child element of the child element and so on.
.innerDiv p:last-of-type {
color: orangered;
}The above means setting the color of the last element in .innerDiv to p to orange.
<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
更多编程相关知识，请访问：编程视频！！
The above is the detailed content of 16 CSS pseudo-classes that improve layout efficiency that you may not know! !. For more information, please follow other related articles on the PHP Chinese website!
