htmlCSS-----高级选择器

前言

伪类选择器

状态类

结构类

伪元素选择器

属性选择器

前言

前面我们学习了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>

效果：