CSS选择器详解：后代、子代、兄弟及属性选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73490373/article/details/130413011

1.后代选择器

作用：选中指定元素中的，符合要求的后代元素

语法：选择器1 选择器2 选择器n{ } ——————（先写祖先，再写后代，之间用空格分开）

例如：

css
     *{
        list-style: none;
      }
      ul li{
        color: purple;
        font-weight: bold;
      }
HTML
<ul>
    <li>包子</li>
    <li>豆浆</li>
    <li>油条</li>
    <div><li>食物</li></div>
</ul>  
<ol>
    <li>衣服</li>
    <li>包包</li>
    <li>裙子</li>
</ol>  
如上图想要选择ul中的所有li标签可以使用后代选择器，包子，豆浆，油条和食物都属于ul的后代，为了方便理解大家可以认为食物充当的是“孙子”这个对象，其余三个可以看做是“儿子”。他们都是ul的后代。

运行结果如图：

当然不一定非要使用属性标签，我们也可以通过类标签或者id属性进行选择。总之它是可以混合组合的。

CSS
*{
        list-style: none;
 }
.clothing li{
        color: pink;
        font-weight: bold;
            }
HTML
<ul>
    <li>包子</li>
    <li>豆浆</li>
    <li>油条</li>
    <div><li>食物</li></div>
   </ul>  
   <ol class="clothing">
    <h4>服装</h4>
    <li>衣服</li>
    <li>包包</li>
    <li>裙子</li>
   </ol> 
运行结果：

2.子代选择器

作用：选中指定元素中，符合要求的子元素。

语法：选择器1>选择器2>选择器n{ }

要求:除食物之外的其他食品全部变成红色

HTML
 <ul>
    <li>包子</li>
    <li>豆浆</li>
    <li>油条</li>
    <div>
      <li>食物</li>
    </div>
   </ul>  
CSS
 ul>li{
        color: pink;
        font-weight: bold;
      }
输出结果：

3.兄弟选择器

分为两种：

1.“ + ”相邻兄弟选择器

————A+B{ }指的是和A紧紧相连的下一个B元素。

HTML
  <h2>吃饭</h2>
  <div>雪球</div>
  <h2>学习</h2>
  <h2>睡觉</h2>
CSS
div+h2{
        color: red;
      }
输出结果：

2.“ ~ ”兄弟选择器：

————选中某元素后面所有的兄弟（同样只看该元素之后符合要求的元素，在他之前的不考虑）

HTML：
<h2>吃饭</h2>
  <div>雪球</div>
  <h2>学习</h2>
  <h2>睡觉</h2>
CSS
 div~h2{
        color: red;
      }
输出结果：

4.属性选择器

1.使用【】

要求：选择具有title属性的，更改样式（属性值不用考虑）

css
 [title]{
        color: pink;
        font-weight: bold;
      }
HTML
  <div title="abc">雪球</div>
  <div title="bca">小伟</div>
  <div title="ssc">太阳</div>
输出结果：

2.如果将上述css代码改为【title="abc"】,则只有“雪球”会更改样式



3.【title^="b"】------指的是选中具有title属性，且属性值中以b开头的元素

4.【title$="c"】------指的是选中具有title属性，且属性值中以c结尾的元素



5.【title*="a"】-------指的是选中具有title属性，并且属性值之中包含a字母的元素