1.：link：visited：hover：avtive
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
シーケンス要件：
-CSS定義では、有効であるためには、a：hoverをa：linkおよびa：visitedの後に配置する必要があります。
-a：activeを有効にするには、a：hoverの後に配置する必要があります。また、効果を確認するには、効果を厳密に指定する必要があります。
2.構造疑似クラスセレクター：
X：nth-child（n）：すべてのp要素の親要素のn番目の子要素を選択します
"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>
- n番目の子セレクターは、どの要素が子要素であるかを計算するときに、すべての親要素のすべての子要素と一緒に計算されます。
このコードは効果を示しています:(スパンは最初の要素ですが、コードでpが一致すると、最後に要素が選択されません）
X：first-child：セレクターは、親要素の最初の子要素と一致します。
<!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：最後の子：親要素の最後のX要素と一致します
<!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）：最後からインデックスを数えます
p:nth-last-child(4){
background: green;
}
X：only-child（n）：セレクターは、親要素の唯一の子要素に属する要素と一致します。
X：nth-of-type（n）：同じタイプのn番目の兄弟要素に一致します。
X：first-of-type：一致した要素の親は、特定のタイプの最初の子要素です。
p:first-of-type
{
background:#ff0000;
}
/*选择的 p 元素是其父元素的第一个 p 元素,和 :nth-of-type(1) 是一个意思。*/
X：last-of-type：親の特定のタイプXの最後の子要素に一致します。
/*指定其父级的最后一个p元素的背景色*/
p:last-of-type
{
background:#ff0000;
}
X：nth-last-of-type（n）：同じタイプの下からn番目の兄弟要素に一致します。
X：only-of-type：この要素には、同じタイプの他の兄弟要素はありません。
覚えやすい（2つのグループ）：
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