CSS选择器总结
作者：互联网
1.复合选择器
先说大的再说小的，具有递进关系。
<!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>后代选择器</title>
<style>
/*先说大的，再说小的*/
.nav a {
color: pink;
}
.wangsicong ul li {
color: blue;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">内部链接</a>
<a href="#">内部链接</a>
<a href="#">内部链接</a>
</div>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<ul>
<li>一条狗</li>
<li>一条狗</li>
<li>一条狗</li>
</ul>
<div class="wangsicong">
<ul>
<li>王可可是一条狗</li>
<li>王可可是一条狗</li>
<li>王可可是一条狗</li>
</ul>
</div>>
</body>
</html>2.子元素选择器
用于分辨复合选择器中无法分辨的递进关系，如：
<div>
<strong>儿子</strong>
<strong>儿子</strong>
<strong>儿子</strong>
</div>
<div>
<p>
<strong>孙子</strong>
<strong>孙子</strong>
<strong>孙子</strong>
</p>
</div>若用
<style>
div strong{
color:pink;
}
</style>则无法区分<div><p><strong>标签的关系，所以，用“>”分辨，书写如下
<style>
div>strong {
color: pink;
}
</style>3.交集选择器
当class中标签相同时
<p class="red">红色</p>
<p class="red">红色</p>
<p class="red">红色</p>
<div class="red">红色</div>
<div class="red">红色</div>
<div class="red">红色</div>
则可用交集选择器改变颜色：
<style>
p.red {
color: red;
}
</style>4.并集选择器
若出现多个基础选择器的应用，可用“，”表示和的意思，来改变不同标签的统一需求。
<style>
p,
span,
.red {
color: red;
}
</style>
<body>
<p>我和你</p>
<p>我和你</p>
<p>我和你</p>
<span>我和你</span>
<span>我和你</span>
<span>我和你</span>
<div class="red">我和你</div>
<div>我和你</div>
<h1>你和我</h1>
<h1>你和我</h1>
</body>标签：总结,color,王可,链接,CSS,红色,选择器,red 来源： https://blog.csdn.net/comeback258/article/details/122431206