css 复合选择器，及权重问题

最新推荐文章于 2023-07-16 13:54:16 发布

流氓也是种气质 _Cookie

最新推荐文章于 2023-07-16 13:54:16 发布

阅读量165

点赞数

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

本文链接：https://blog.csdn.net/qq_37550440/article/details/122185954

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

后代选择器（重点），子选择器，交集选择器，并级选择器（重点）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /*后代选择器  */
  div a {
    color: red;
  }
  /* 子代选择器 */
  div>strong {
    color: red;
  }
  /*交集选择器p  */
  p.red {
    color: red;
  }
  /*并集选择器  */
  /* p {
    color: red;
  }
  span {
    color: red;
  } */
  p, 
  span {
    color: red;
  }
</style>
<body>
<!--   
    后代选择器div a 子孙后代
    子代选择器div>strong  亲儿子
    交集选择器p.red 既是p标签 又是.red类选择器
    并集选择器p, span p和span 应用相同样式，通常用于集体声明
   -->
  <div>
    <a href="">内部链接</a>
    <a href="">内部链接</a>
    <a href="">内部链接</a>
  </div>
  <a href="">外部链接</a><a href="">外部链接</a><a href="">外部链接</a>

  <div><strong>儿子</strong></div>
  <div>
    <p><strong>孙子</strong></p>
  </div>

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

  <P>红色</P>
  <P>红色</P>
  <P>红色</P>
  <span>红色</span><span>红色</span><span>红色</span>
  <div>红色</div>
  <div>红色</div>
  <div>红色</div>

</body>

</html>

权重问题可从继承性（有继承性的属性有font- ,line-,color），层叠性，就近原则这三方面来讲

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css 权重问题可从 继承性,层叠性， 就近原则这三方面来讲</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .box {
      width: 200px;
      height: 200px;
      background: pink;
      /* 拥有继承性的属性 */
      color: red; 
      font-size: 24px;
      line-height: 200px;
    }
    p {
      /* 层叠性 也可说明继承的权重是0  */
      color: blue;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>son 123</p>
  </div>
</body>
</html>

流氓也是种气质 _Cookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 复合选择器，及权重问题

后代选择器（重点），子选择器，交集选择器，并级选择器（重点）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale.
复制链接

扫一扫

专栏目录