常用的CSS伪类选择器有哪些？
CSS伪类选择器是CSS3新增的一个特性，它允许我们针对元素的状态进行样式设置，常用的CSS伪类选择器有以下几种：
1、:hover
当鼠标悬停在元素上时触发的样式。
```css
a:hover {
color: red;
}
```
2、:active
当元素被激活(如点击按钮)时触发的样式。
```css
button:active {
background-color: yellow;
}
```
3、:focus
当元素获得焦点时触发的样式。
```css
input:focus {
border: 1px solid blue;
}
```
4、:visited
当链接被访问过时触发的样式。
```css
a:visited {
color: purple;
}
```
5、:first-child
当元素是其父元素的第一个子元素时触发的样式。
```css
ul li:first-child {
font-weight: bold;
}
```
6、:last-child
当元素是其父元素的最后一个子元素时触发的样式。
```css
ul li:last-child {
border-bottom: none;
}
```
7、:nth-child(n)
当元素是其父元素的第n个子元素时触发的样式。
```css
ul li:nth-child(odd) {
background-color: f2f2f2;
}
ul li:nth-child(even) {
padding-left: 10px;
}
```
8、::before/::after
在元素内容前或后插入内容。
```css
p::before {
content: "※";
}
p::after {
content: "***";
}
```
9、not() pseudo-class selectors in CSS3 and later versions of Internet Explorer (IE) support the negation operator "!" to exclude elements from matching a certain style rule. For example, to apply a different style to all list items except those with a class of "active": css pseudo-class selectors can be used to apply different styles to different elements based on their state or characteristics. For example, we can use the :hover pseudo-class to change the color of an element when the mouse pointer is over it, and the :active pseudo-class to change the background color of an element when it is being clicked or activated by the user.
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/268654.html
微信扫一扫 