前言
本文基于尚硅谷Web前端基础教程发布，你也可以理解成这是一篇尚硅谷教程笔记，当然这里也有我的一些经验总结
复合选择器
复合选择器说白了其实就是一个套着一个，多重使用，但它复合的条件以下标签必须全部满足，下面举例说明
1
2
<div class="red">我是红色div</div>
<p class="red">我是红色p</p>
现在如果我们想把class设置成红色这已经难不了我们来，我们直接
1
2
3
.red{
color: red ;
}
可是我们如果想要把div的字体调成30px呢？在red那一行写吗？显然不行，因为这里有两个标签的class是red，在red里写会使两个标签都变成红色，可我们的要求是一个div标签变成红色就好，那应该怎么办呢
1
2
3
4
div.red{
color: red ;
font-size: 30px;
}
这样div标签就即是红色，又是30px啦，想要p标签不被影响就可以单独把它列出来，保留上一个CSS
这样的选择器又可以叫交集选择器
- 作用:选中同时符合多个条件的标签
- 语法:选择器1选择器2选择器n{}
- 要注意的是如果选择器中有标签元素，必须要以标签开头，如上就是
div在前头，.选择器在后头
复合选择器里又分了并集选择器
并集选择器相比交集选择器要求稍微松一点，因为你只要满足选择器中的其中一项要求就可以了，例如
1
2
3
4
5
6
7
8
<div class="red">我是div</div>
<p class="red">我是p</p>
<style>
div, .red{
color: red;
font-size: 30px;
}
</style>
如果按照交集选择器就只会让第一行的div变成红色，因为它满足选择器中的条件，又有div有时red的class
但你们看出来没有，这里的两个元素中间有空格并且有,隔开，这就是并集选择器的语法，作用就是让不是div的元素，只要你满足了red这一点就一律帮你完成字体和颜色的设置
并集选择器只需要符合一点要求就可以了，所以div的p元素都能得到设置而交集选择器需要完成两个，这里的,代表“或，或者”
关系选择器
在正式开始之前，还需要认识几个概念
1
2
3
4
5
6
7
8
9
10
<div>
我是一个div
<p>我是div元素里的p元素
<span>我是p元素里的span元素</span>
</p>
<sapn>我是div中的</span>
</div>
在这个里面，各标签和各之前是环环相扣包括的，其中包括
- 父元素
- 直接包含子元素的元素叫子元素
- 子元素
- 直接被父元素包含的元素
- 祖先元素
- 直接或间接包含后代元素的元素
- 一个元素的父元素都可以称是祖先元素
- 后代元素
- 直接或间接被祖先元素包含的元素
- 子元素同时也可以说是后代元素
- 兄弟元素
- 拥有相同父元素的元素
综上我们把刚才那段代码写上注释方便理解，方便区分我把两个span标上序号.1和.2
1
2
3
4
5
6
7
8
9
10
11
12
<div>
<!-- div就是一个祖先元素，它包括了这里面的所有元素 -->
我是一个div
<!-- p元素是.1元素的父元素或者说祖先元素因为它包括着span.1 -->
<p>我是div元素里的p元素
<!-- 它的辈分就相对小了，他是div的后代元素，是p的子元素 -->
<span.1>我是p元素里的span元素</span>
</p>
<!-- 它和p标签是兄弟关系，拥有相同的父元素--div -->
<sapn.2>我是div中的</span>
</div>
子元素选择器
- 选中指定父元素下的子元素
- 父元素 > 子元素{}
理解了这个接下来就好说了，如果有一个要求，需要在下面的代码框里添加代码，使它实现让.2变成红色我们需要
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
我是一个div
<p>我是div元素里的p元素
<span.1>我是p元素里的span元素</span>
</p>
<sapn.2>我是div中的span</span>
</div>
<style>
div > span{
color:red ;
}
</style>
这个的意思是直接选中div内的直接span，也就是span.2定义为红色
也可以复合使用
1
2
3
div > p > span{
color: red;
}
这样就只想p元素里的span，相当于文件的路径了
后代选择器
- 选中指定元素内指定后代元素
- 祖先 后代
这次我不让.2变色了，我想让.1变色，首先先想想.1和谁有关系–div，div在其中是.1的祖先，我们可以用后代选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
我是一个div
<p>我是div元素里的p元素
<span.1>我是p元素里的span元素</span>
</p>
<sapn.2>我是div中的</span>
</div>
<style>
div span{
color:red;
}
</style>
也就是说省略大于号了，直接空格
选择下一个兄弟
- 前一个 + 下一个
- 兄 ~ 弟
改变一个样式的话就是+，之间所有的话呢就是~相接
