目录
前言
伪类选择器
状态类
结构类
伪元素选择器
属性选择器
前言
前面我们学习了CSS中的相关选择器（链接html&CSS-----CSS选择器（上）_灰勒塔德的博客-CSDN博客 html&CSS-----CSS选择器（下）_灰勒塔德的博客-CSDN博客）今天我们接着学习比较高级的选择器，下面就一起来去看看吧！
伪类选择器
当你希望元素在特定的状态下发生样式的变化时，可以使用伪类选择器。
-
状态类
写法 介绍 举例 :hover 鼠标悬停 a:hover{color:pink;} :link 未被访问的链接（特指a标签） a:link{color:red}; :visited 被访问过的链接（特指a标签） a:visited{color:blue;} :active 被点击按下状态 a:active{color:green;}
:hover:active不仅仅能用在a标签上。
:hover最为常用最为重要。可以进一步在伪类后进行选择，比如：
#wrap:hover .nav{display:none;
| 写法 | 介绍 | 举例 |
|---|---|---|
| :focus | 获得焦点状态(接收键盘事件或其他用户输入的元素都允许 :focus 选择器。) | input:focus{border:1px solid blue;} |
| :checked | （单选/多选）表单被勾选状态 | input:checked{background-color:#aaa;} |
下面看个示例
<!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>*{font-size: 30px;}.first ul li:hover{color: violet;}.second a:link{/* 这里可以改变未被访问时的a标签颜色（样式） */color: red;}.third{color: green;}.forth:active{color: blue;}</style>
</head>
<body><!-- :hover选择器 --><div class="first"><ul><li>《Re:从零开始的异世界生活》</li><li>《来着新世界》</li><li>《紫罗兰永恒花园》</li></ul></div><!-- :link选择器 --><div class="second"><a href="www.baidu.com">访问百度</a></div><!-- :visited选择器 --><div class="third"><a href="www.baidu.com" target="_blank">访问baidu</a></div><!-- :active选择器 --><div class="forth">点我变颜色，看看吧</div>
</body>
</html>效果如下：
1691821211078
结构类
| 写法 | 介绍 | 举例 |
|---|---|---|
| E:nth-child(n) | 这个表示选择列表中的倒数第n个标签 | p:nth-child(2){color:red;} |
| E:nth-of-type(n) | E元素父级的第n个E元素，无视其他元素 | p:nth-of-type(2){color:red;} |
| E:first-child | E元素父级的第一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素） | p:first-child{color:red;} |
| E:last-child | E元素父级的最后一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素） | p:last-child{color:red;} |
上述选择器 n 所表示的可以是一个 数字 或者 奇数odd 或者 偶数even 或者 一个表达式。
:nth-child(n):nth-of-type(n)有对应的“倒着数”属性:nth-last-child(n):nth-last-of-type(n)。
下面看个示例：
<!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>*{font-size: 30px;}ul li:first-child{color: red;}ul li:last-child{color: red;}</style>
</head>
<body><ul><div>start</div><li>1</li><li>2</li><li>3</li><!-- <div>end</div> --></ul>
</body>
</html>效果：
这里要注意first-child和last-child这两个选择器的使用，因为这里作用的标签必须是父类元素的第一个或者最后一个，否则不起效果，如上所示。
伪元素选择器
伪类选择器相当于在某种情况下添加一个虚拟类名，而伪元素选择器则是相当于创建了一个虚拟元素。
| 写法 | 介绍 | 举例 |
|---|---|---|
| E::before | 相当于在E元素的最前面添加一个额外的子元素 | #wrap::before{content:"Hello World!"} |
| E::after | 相当于在E元素的最后面添加一个额外的子元素 | #wrap::after{content:"Hello World!"} |
必须拥有
content样式，上述两个伪元素才会生效。创建的子元素是一个行内元素。
::after常用来清除浮动。
content除了写文字之外，还可以用url指定一张图片等其他写法。
/* 消除浮动自适应问题的写法 */E::after{content: '';display: block;clear: both; }属性选择器
这一类选择器跟正则匹配搭配使用，实际上并不是怎么用到，比较少用的那种，我们可以去选择性的去使用
| [attr] | 属性选择器（拥有attr标签属性） | [title]{ color:red; } |
| [attr=val] | 属性选择器（拥有标签属性attr并值为val） | [target=_blank]{ color:red; } |
| [attr*=val] | 属性选择器（拥有标签属性attr并值包含val） | [src*=baidu]{border:5px solid pink;} |
| [attr$=val] | 属性选择器（拥有标签属性attr并值以val结尾） | [src~=jpg]{ border:5px solid pink; } |
| [attr^=val] | 属性选择器（拥有标签属性attr并值以val开头） | [class^=nav]{ background:pink; } |
| 选择规则1选择规则2 | 复合选择器（多个规则来匹配元素） | div.nav.left{ width:100px; } 有nav和left类名的div标签 |
下面看个示例：
<!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>*{font-size: 30px;}/* 这里匹配到的是含有o字母的选择器 */div[class*='o']{color: blueviolet;}</style>
</head>
<body><div class="hhh">哈喽哦</div><div class="food">吃饭了吗</div><div class="look">快看快看</div>
</body>
</html>效果：
好了，以上就是今天的全部内容了，我们下一期再见！
分享一张壁纸：
