今天学习下css的伪类选择器，学习好伪类选择器，可以更好的写出精美的页面。

伪类选择器（Pseudo-class selectors）是CSS中一种特殊的选择器，它用于定义元素的特殊状态。这些状态不是由HTML直接定义的，而是由用户的行为或元素的特定状态触发的。伪类选择器允许你基于这些状态来应用样式规则，从而创建出更加动态和交互性强的网页。

伪类选择器通常与HTML元素或类选择器结合使用，以指定在特定条件下应如何显示这些元素。它们以冒号（:）开头，后跟伪类的名称和可能包含的参数。

以下是一些CSS3中常用的伪类选择器及其对应的HTML代码示例。这些伪类选择器允许你基于不同的状态和条件来样式化元素。

1. :hover

用于当鼠标悬停在元素上时改变元素的样式。

HTML:

<div class="button">悬停我试试</div>

CSS:

.button:hover {  
  background-color: blue;  
  color: white;  
}

2. :active

用于当元素被激活时（如鼠标点击但尚未释放）改变元素的样式。

HTML:

<button class="active-button">点击我</button>

CSS:

.active-button:active {

background-color: green;

color: white;

}

3. :focus

用于当元素获得焦点时（如用户点击或通过键盘导航到）改变元素的样式。

HTML:

<input type="text" class="focus-input" placeholder="点击这里并输入">

CSS:

.focus-input:focus {

border: 2px solid orange;

outline: none; /* 移除默认的焦点轮廓 */

}

4. :first-child

选择某个父元素下的第一个子元素。

HTML:

<ul>

<li>第一个列表项</li>

<li>第二个列表项</li>

<li>第三个列表项</li>

</ul>

CSS:

ul li:first-child {

color: red;

}

5. :last-child

选择某个父元素下的最后一个子元素。

HTML: 同上

CSS:

ul li:last-child {

color: green;

}

6. :nth-child(n)

选择某个父元素下的第n个子元素，其中n可以是数字、关键词（如odd或even）或公式。

HTML: 同上

CSS:

/* 选择每个父元素下的第二个子元素 */

ul li:nth-child(2) {

background-color: yellow;

}

/* 选择每个父元素下的奇数子元素 */

ul li:nth-child(odd) {

font-weight: bold;

}

7. :nth-last-child(n)

与:nth-child(n)类似，但它是从后往前计数。

HTML: 同上

CSS:

/* 选择每个父元素下的倒数第二个子元素 */

ul li:nth-last-child(2) {

text-decoration: underline;

}

8. :checked

用于选择被选中的<input type="checkbox">或<input type="radio">元素。

HTML:

<label><input type="checkbox" class="check"> 选项1</label>

<label><input type="checkbox" class="check"> 选项2</label>

CSS:

.check:checked + label {

font-weight: bold;

}

请注意，:checked伪类选择器通常与+选择器结合使用，以选择紧跟在选中复选框或单选按钮之后的元素（如标签）。

这些伪类选择器非常强大，能够让你根据用户与网页的交互来动态地改变元素的样式。