css复合选择器

最新推荐文章于 2025-06-01 23:41:42 发布

田田田青

最新推荐文章于 2025-06-01 23:41:42 发布

阅读量96

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_49549401/article/details/107544601

版权

css 专栏收录该内容

1 篇文章

订阅专栏

CSS复合选择器

下面整理了一些css的复合选择器

后代选择器

后代选择器使用空格隔开，代码展示：

// 后代选择器，会选中所有div里面的p标签
<style>
        div p{
            color: blue;
        }
</style>
<div>
     <div>
         <p>我是一个p标签</p>
     </div>
     <p>后代选择器</p>
     <nav>
         <p>我是一个p标签</p>
     </nav>
</div>

直系选择器，使用>隔开

// 直系选择器，会选中div下面的p标签，nav里面的p标签则不会选中
<style>
        div>p{
            color: blue;
        }
</style>
<div>
      <div>
          <p>我是一个p标签</p>
      </div>
      <p>后代选择器</p>
      <nav>
          <p>我是一个p标签</p>
      </nav>
</div>

并集选择器，使用,隔开

// 并集选择器，同时选择多个
<style>
        h1,h2,h3{
            color: pink;
        }
</style>
<body>
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
</body>

交集选择器

// 交集选择器，中间没有间隔（只会选中p标签中类是pink的）
<style>
        p.pink{
            color: blue;
        }
</style>
<div class="pink">
   	  <p>我是一个p标签</p>
</div>
<div>
      <p class="pink">我是一个p标签</p>
</div>