回顾
基本选择器又分为三种方式:
- 后代选择器
- 子选择器
- 相邻选择器
- 通用选择器
结构伪类选择器
结构伪类选择器有很多种伪类,这里我们列举常用的几种方式:
- first-child 伪类
- hover悬停伪类
- nth-of-type() 伪类
- nth-child()伪类
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: pink;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: deeppink;
}
/*定位当前元素的父级元素,选择父级元素的第n个子元素的当前元素*/
p:nth-child(2){
background: #001aff;
}
/*定位当前元素的父级元素,选择父级元素的当前元素种类的第n个子元素*/
p:nth-of-type(2){
background: red;
}
/*鼠标悬停在该元素的时候*/
a:hover{
background: red;
border-radius: 2em;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<h>h1</h>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>p4</li>
<li>p5</li>
<li>p6</li>
</ul>
<a href="">这是一个连接</a>
</body>
</html>
测试效果
作者有话说
博客创作不易,希望看到这里的读者动动你的小手点个赞,如果喜欢的小伙伴可以一键三连,作者大大在这里给大家谢谢了。