前言

本文基于尚硅谷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>

也就是说省略大于号了，直接空格

选择下一个兄弟

• 前一个 + 下一个
• 兄 ~ 弟

改变一个样式的话就是+，之间所有的话呢就是~相接

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章