【前端18】复合选择器和关系选择器

原文：https://linexic.top/2024/06/29/guigu-css-18/

前言

本文基于尚硅谷Web前端基础教程发布，你也可以理解成这是一篇尚硅谷教程笔记，当然这里也有我的一些经验总结

复合选择器

复合选择器说白了其实就是一个套着一个，多重使用，但它复合的条件以下标签必须全部满足，下面举例说明

<div class="red">我是红色div</div><p class="red">我是红色p</p>

现在如果我们想把class设置成红色这已经难不了我们来，我们直接

red{   
    color: red ;
 }

可是我们如果想要把div的字体调成30px呢？在red那一行写吗？显然不行，因为这里有两个标签的class是red，在red里写会使两个标签都变成红色，可我们的要求是一个div标签变成红色就好，那应该怎么办呢

div.red{   
    color: red ;   
    font-size: 30px;
}

这样div标签就即是红色，又是30px啦，想要p标签不被影响就可以单独把它列出来，保留上一个CSS

这样的选择器又可以叫交集选择器

• 作用:选中同时符合多个条件的标签
• 语法:选择器1选择器2选择器n{}
• 要注意的是如果选择器中有标签元素，必须要以标签开头，如上就是div在前头，选择器在后头

复合选择器里又分了并集选择器并集选择器相比交集选择器要求稍微松一点，因为你只要满足选择器中的其中一项要求就可以了，例如

<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元素都能得到设置而交集选择器需要完成两个，这里的,代表“或，或者”

关系选择器

在正式开始之前，还需要认识几个概念

<div>

我是一个div
<p>我是div元素里的p元素
<span>我是p元素里的span元素</span></p>
<sapn>我是div中的</span>

</div>

在这个里面，各标签和各之前是环环相扣包括的，其中包括

• 父元素
  • 直接包含子元素的元素叫子元素
• 子元素
  • 直接被父元素包含的元素
• 祖先元素
  • 直接或间接包含后代元素的元素
  • 一个元素的父元素都可以称是祖先元素
• 后代元素
  • 直接或间接被祖先元素包含的元素
  • 子元素同时也可以说是后代元素
• 兄弟元素
  • 拥有相同父元素的元素

综上我们把刚才那段代码写上注释方便理解，方便区分我把两个span标上序号.1和.2

<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变成红色我们需要

<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定义为红色

也可以复合使用

div > p > span{     
      color: red;
}

这样就只想p元素里的span，相当于文件的路径了

后代选择器

• 选中指定元素内指定后代元素
• 祖先 后代这次我不让.2变色了，我想让.1变色，首先先想想.1和谁有关系–div，div在其中是.1的祖先，我们可以用后代选择器

<div>

我是一个div<p>我是div元素里的p元素
<span.1>我是p元素里的span元素</span></p>
<sapn.2>我是div中的</span>

</div>
<style>   
div span{      
     color:red;  
  }
</style>

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

选择下一个兄弟

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