Inverse selector.
/* 类名不是 `.fancy` 的 <p> 元素 */
p:not(.fancy) {
color: green;
}
/* 非 <p> 元素 */
body :not(p) {
text-decoration: underline;
}
/* 既不是 <div> 也不是 <span> 的元素 */
body :not(div):not(span) {
font-weight: bold;
}
Matches the first element in a set of sibling elements
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Match the first li element under ul:
li:first-child {
color: red;
}
first selector refers to the style of the first page when printing a document.
: first-child
Matches the last element in a set of sibling elements
First-of-type and: last-of-type
Represents the first / last element of the specified type under its parent. Different from: first-child,: first-child: For example:
li:last-child {
color: red;
}
li:last-of-type {
background: blue;
}
DOM structure:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<div>4</div>
</ul>
li:last-child wanted to match the last element of ul and was li, but it didn't exist so the match failed. What li:last-of-type wants to match is the last li element of ul, which exists.
Matches the Nth child element that belongs to its parent element.
p:nth-child(2) {
color: red;
}
Matches the second element p under the parent element. Special usage: 1.: nth-child (2n) selects an even tag. 2n can also be even.