学习目标
- 能够使用复合选择器在HTML中选择元素
- 能够使用Emmet语法提高编码速度
- 能够使用hover伪类选择器设置鼠标悬停的状态
- 能够使用结构伪类选择器找到偶数、奇数个li标签
复合选择器
- 作用:在选择器1所在的后代中,找到选择器2,并且设计它的样式
- 注意:后代包括:儿子 孙子 重孙子… 选择器与选择器之间通过空格隔开
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* h后代选择器 */
/*后代选择器:
- 选择器语法:选择器1 选择器2 {css}
2.结果:在选择器1所在的后代中,找到选择器2,并且设计它的样式
3.注意:后代包括:儿子 孙子 重孙子......
选择器与选择器之间通过空格隔开 */
.father p {
color: red;
}
</style>
</head>
<body>
<div class="father">
<p>小姐姐</p>
<div>
<p>小可爱</p>
</div>
</div>
<p>小哥哥</p>
</body>
</html>
子代选择器
- 作用:先通过选择器1的子代中,找到满足选择器2的标签,并对它设置样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father > p {
color: red;
}
.father > div >p {
color: green;
}
</style>
</head>
<body>
<div class="father">
<p>小姐姐</p>
<div>
<p>小可爱</p>
</div>
</div>
<p>小哥哥</p>
</body>
</html>
并集选择器
- 作用:找到选择器1和选择器2对应的标签,设置样式
<!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>
div,
p {
color: red;
}
</style>
</head>
<body>
<!-- 需求:把div和p标签设置为红色(节省代码的方式) -->
<div>我是div</div>
<div>我也是一个div</div>
<p>我是p标签</p>
<p>我也是p标签</p>
<h1 class="red">我是一个h1标签</h1>
<h2>我是一个h2标签</h2>
</body>
</html>
交集选择器
- 作用:找到同时满足选择器1和选择器2,并且对它设计样式
- 注意:交集选择器中有标签选择器,此时标签选择器必须写在第一个
<!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>
div.red {
color: red;
}
</style>
</head>
<body>
<!-- 需求:只让小可爱变红(不能改变html结构) -->
<div class="red">小姐姐</div>
<p>小帅哥</p>
<p class="red">小可爱</p>
</body>
</html>
伪类选择器
- 注意:书写的顺序“lvha"
- hover:除了可以作用在超链接a标签,还可以作用在其他标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 伪类选择器对超链接设置不同状态 */
a:link {
color: red;
}
a:visited {
color: goldenrod;
}
/* 适用于其他标签 */
a:hover {
color: pink;
}
a:active {
color: springgreen;
}
</style>
</head>
<body>
<a href="#">我是一个a标签</a>
</body>
</html>
<!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>
/* 需求:鼠标悬停在a标签上,文字变红 */
a {
text-decoration: none;
}
a:hover {
color: red;
}
/* 需求:鼠标悬停在box上,box宽高变为400px,并且背景色变成粉色 */
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
.box:hover {
width: 400px;
height: 400px;
background-color:pink;
}
</style>
</head>
<body>
<a href="#">我是一个a标签</a>
<div class="box"></div>
</body>
</html>
结构伪类选择器
- E:fist-child {}匹配父元素的第一个子元素,并且是E元素 ;
- E:last-child {}匹配父元素的最后一个子元素,并且是E元素;
- E:nth-child(n) {}匹配父元素的第几个子元素,并且是E元素;
- E:nth-last-child(n) {}匹配父元素的倒是第几个子元素,并且是E元素;
使用结构伪类选择器找到偶数、奇数个li标签
查找单个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 1、找到第一个子元素,并且为li标签 */
li:first-child {
background-color: yellow;
}
/* 2、找到最后一个子元素,并且为li标签 */
li:last-child {
background-color: pink;
}
/* 3、找到第3个子元素,并且为li标签 */
li:nth-child(3) {
background-color: turquoise;
}
/* 4、找到倒数第3个子元素,并且为li标签 */
li:nth-last-child(3) {
background-color: slateblue;
}
</style>
<body>
<!-- ul>li*10>a{我是第$个a} -->
<ul>
<li><a href="#">我是第1个a</a></li>
<li><a href="#">我是第2个a</a></li>
<li><a href="#">我是第3个a</a></li>
<li><a href="#">我是第4个a</a></li>
<li><a href="#">我是第5个a</a></li>
<li><a href="#">我是第6个a</a></li>
<li><a href="#">我是第7个a</a></li>
<li><a href="#">我是第8个a</a></li>
<li><a href="#">我是第9个a</a></li>
<li><a href="#">我是第10个a</a></li>
</ul>
</body>
</html>
E:nth-child(n) {} 奇数个—偶数个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 1、找到偶数个li------------------------ */
li:nth-child(2n) {
background-color: goldenrod;
}
/* 2、找到奇数个li------------------------ */
li:nth-child(2n-1) {
background-color: violet;
}
</style>
</head>
<body>
<!-- ul>li*10>a{我是第$个a} -->
<ul>
<li><a href="#">我是第1个a</a></li>
<li><a href="#">我是第2个a</a></li>
<li><a href="#">我是第3个a</a></li>
<li><a href="#">我是第4个a</a></li>
<li><a href="#">我是第5个a</a></li>
<li><a href="#">我是第6个a</a></li>
<li><a href="#">我是第7个a</a></li>
<li><a href="#">我是第8个a</a></li>
<li><a href="#">我是第9个a</a></li>
<li><a href="#">我是第10个a</a></li>
</ul>
</body>
</html>
E:nth-child(n) {}前5个—后5个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 3、找到前5个------------------------*/
li:nth-child(-n+5) {
background-color: mediumvioletred;
}
/* 4、找到从第5个往后------------------------ */
li:nth-child(n+5) {
background-color: darkgreen;
}
</style>
</head>
<body>
<!-- ul>li*10>a{我是第$个a} -->
<ul>
<li><a href="#">我是第1个a</a></li>
<li><a href="#">我是第2个a</a></li>
<li><a href="#">我是第3个a</a></li>
<li><a href="#">我是第4个a</a></li>
<li><a href="#">我是第5个a</a></li>
<li><a href="#">我是第6个a</a></li>
<li><a href="#">我是第7个a</a></li>
<li><a href="#">我是第8个a</a></li>
<li><a href="#">我是第9个a</a></li>
<li><a href="#">我是第10个a</a></li>
</ul>
</body>
</html>
易错点
li:first-child a {
color: red;
}
li a:first-child {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:first-child a {
color: red;
}
/* li a:first-child {
color: red;
} */
</style>
</head>
<body>
<ul>
<li><a href="#">我是第1个a</a></li>
<li><a href="#">我是第2个a</a></li>
<li><a href="#">我是第3个a</a></li>
<li><a href="#">我是第4个a</a></li>
<li><a href="#">我是第5个a</a></li>
<li><a href="#">我是第6个a</a></li>
<li><a href="#">我是第7个a</a></li>
<li><a href="#">我是第8个a</a></li>
<li><a href="#">我是第9个a</a></li>
<li><a href="#">我是第10个a</a></li>
</ul>
</body>
</html>