目录
前言
伪类选择器
状态类
结构类
伪元素选择器
属性选择器
前言
前面我们学习了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>效果：
好了，以上就是今天的全部内容了，我们下一期再见！
分享一张壁纸：
