目录
1 后代选择器
2 子代选择器
3 并集选择器
4 交集选择器
5 hover伪类选择器
1 后代选择器:
作用;根据HTML标签的嵌套关系,选择父元素 后代 中满足条件的元素,设置样式
代码:
选择器1 选择器2{
属性名:属性值
}
注意:
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>
/* 后代选择器 */
div p {
color: red;
}
</style>
</head>
<body>
<!-- 让div里的p内容字体颜色变红 -->
<p>这是一个p标签</p>
<div>
<p>这是div的儿子</p>
</div>
</body>
</html>
效果图;
2 子代选择器:
作用;根据HTML标签的嵌套关系,选择父元素 子代 中满足条件的元素,设置样式
代码:
选择器1>选择器2{
属性名:属性值
}
注意:
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>
/* 子代选择器 */
div>a {
color: orange;
}
</style>
</head>
<body>
<!-- 让div的a标签字体颜色为橙色 -->
<div>
<a href="#">这是div的a标签</a>
<p>
<a href="#">这是p的a标签</a>
</p>
</div>
</body>
</html>
效果图:
3 并集选择器
作用:同时选择多组标签,设置相同的样式
代码:
选择器1,选择器2{
属性名:属性值
}
注意:
1 并集选择器中的每组选择器之间通过,隔开
2 并集选择器中的每组选择器可以是基础选择器或者复合选择器
3 并集选择器中的每组选择器通常一行写一个,提高代码的可读性
例题:
<!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>
/* 并集选择器 */
h1,
span {
color: green;
}
</style>
</head>
<body>
<!-- 让h1标签和span标签字体颜色都为绿 -->
<h1>这是h1标签</h1>
<span>这是span标签</span>
</body>
</html>
效果图:
4 交集选择器
作用:选择页面中,同时满足多个选择器的标签,设置样式
代码:
选择器1选择器2{
属性名:属性值
}
注意:
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>
/* 交集选择器 */
div.one {
color: yellow;
}
</style>
</head>
<body>
<!-- 让带有one类选择器的div标签字体为黄色 -->
<p class="one">这是带有one类选择器的p标签</p>
<div class="one">这是带有one类选择器的div标签</div>
</body>
</html>
效果图:
5 hover伪类选择器
作用:选中鼠标悬停在元素上的状态,设置样式
代码:
选择器:hover{
属性名:属性值
}
例题
<!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>
/* 伪类选择器 */
h3:hover {
color: red;
}
</style>
</head>
<body>
<!-- 鼠标悬停时,字体为红色 -->
<h3>h3标签</h3>
</body>
</html>
效果图:
以上是作者学习总结,分享所学,共同进步。如若哪处有误,感谢指出!