1. :link :visited :hover :avtive
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
Sequence requirements:
-In the CSS definition, a:hover must be placed after a:link and a:visited to be valid;
-a:active must be placed after a:hover to be effective, and the effect needs to be strictly in order to see the effect
2. Structural pseudo-class selector:
X:nth-child(n): select the nth child element of the parent element of all p elements
"n"可以是数字1、2、3、4...，也可以是表达式2n、2n+1、-n+3等，还可以是关键词odd/even。
p:nth-child(n){background:green} 表示p父元素中的第n个元素（且为p）
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}/*选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border: 1px solid orange;
height: 15px;
width: 100px;
font-size: 12px;
}
p:nth-child(1){
background: green;
}
</style>
</head>
<body>
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
</div>
</body>
</html>
- The nth-child selector is calculated together with all the child elements in all parent elements when calculating which element is the child element.
This code demonstrates the effect: (span is the first element, but when p is matched in the code, no element is selected in the end)
X:first-child: The selector matches the first child element in its parent element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border: 1px solid orange;
height: 15px;
width: 100px;
font-size: 12px;
}
span:first-child{
background: green;
}
</style>
</head>
<body>
<div>
<span>div的第一个子元素为span标签</span>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
</div>
</body>
</html>
X: last-child: match the last X element in the parent element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border: 1px solid orange;
height: 15px;
width: 100px;
font-size: 12px;
}
p:last-child{
background: green;
}
</style>
</head>
<body>
<div>
<span>div的第一个子元素为span标签</span>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
</div>
</body>
</html>
X: nth-last-child(n): count the index from the last
p:nth-last-child(4){
background: green;
}
X:only-child(n): The selector matches the element that belongs to the only child element in the parent element.
X:nth-of-type(n): Match the nth sibling element of the same type.
X:first-of-type: The parent of the matched element is the first child element of a specific type.
p:first-of-type
{
background:#ff0000;
}
/*选择的 p 元素是其父元素的第一个 p 元素,和 :nth-of-type(1) 是一个意思。*/
X: last-of-type: matches the last child element of a specific type X of its parent.
/*指定其父级的最后一个p元素的背景色*/
p:last-of-type
{
background:#ff0000;
}
X:nth-last-of-type(n): Match the nth sibling element from the bottom of the same type.
X:only-of-type: This element has no other sibling elements of the same type.
Easy to remember (two groups):
X：nth-child(n)
X: first-child
X: last-child
X: nth-last-child(n)
X: only-child
X: nth-of-type(n)
X: first-of-type
X: last-of-type
X: nth-last-of-type(n)
X: only-of-type