devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS三大特性_父元素添加类名 影响子元素样式

作者：weixin_40725706 | 2024-07-15 08:33:57

赞

踩

父元素添加类名 影响子元素样式

四、CSS三大特性

1.1 继承性的介绍

特性：子元素有默认继承父元素样式的特点（子承父业）

 

可以继承的常见属性：

  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height
  5. ......

注意点：

  • 可以通过调试工具判断样式是否可以继承 

拓展 继承的应用

好处：可以在一定程度上减少代码

常见应用场景：

  1. 可以直接给ul设置list-style:none 属性，从而去除列表默认的小圆点样式（li继承自ul）
  2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
  1.  <style>
  2.         /* 1、直接给ul设置list-style:none 去除无序列表的小圆点 */
  3.         ul {
  4.             list-style: none;
  5.         }
  6.  
  7.         /* 2、统一不同浏览器默认文字大小，直接给body标签设置统一的font-size */
  8.         body {
  9.             font-size: 20px;
  10.         }
  11.     </style>
  12.  
  13. <body>
  14.     <ul>
  15.         <li>我是第1个li</li>
  16.         <li>我是第2个li</li>
  17.         <li>我是第3个li</li>
  18.         <li>我是第4个li</li>
  19.         <li>我是第5个li</li>
  20.         <li>我是第6个li</li>
  21.         <li>我是第7个li</li>
  22.         <li>我是第8个li</li>
  23.         <li>我是第9个li</li>
  24.         <li>我是第10个li</li>
  25.  
  26.     </ul>
  27. </body>

 

 拓展 继承失败的特殊情况

如果浏览器有默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

  1. a标签的color会继承失效
  2. h系列标签的font-size会继承失效
  3. div的高度不能继承，但是宽度有类似于继承的效果

 2.1 层叠性的介绍

特性：

  • 给同一个标签设置不同的样式-->此时样式会层叠叠加-->会共同作用在标签上 
    1. <style>
    2.         p {
    3.             color: red;
    4.         }
    5.  
    6.         p {
    7.             font-size: 30px;
    8.         }
    9.     </style>
    10.  
    11.  
    12. <body>
    13.     <p>
    14.         我是一个文字 </p>
    15. </body>

  • 给同一个标签设置相同的样式-->此时样式会层叠覆盖-->最终写在最后的样式会生效 
    1. <style>
    2.         p {
    3.             color: red;
    4.         }
    5.  
    6.         p {
    7.             
    8.             color: blue;
    9.         }
    10.     </style>
    11.  
    12. <body>
    13.     <p>
    14.         我是一个文字 </p>
    15. </body>

注意点：

  1. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果  
    1.  <style>
    2.         .orange {
    3.             color: orange;
    4.         }
    5.  
    6.         p {
    7.             color: red;
    8.         }
    9.  
    10.         p {
    11.             color: blue;
    12.         }
    13.     </style>
    14.  
    15. <body>
    16.     <p class="orange">我是一个文字 </p>
    17. </body>

3.1 优先级的介绍

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

优先级公式：

  • 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important 
    1. <style>
    2.         /* 7、!important */
    3.         p {
    4.             color: saddlebrown !important;
    5.         }
    6.  
    7.         /* 5、id选择器 */
    8.         #one {
    9.             color: pink;
    10.         }
    11.  
    12.         /* 4、类选择器 */
    13.         .son {
    14.             color: orange;
    15.         }
    16.  
    17.         /* 3、标签选择器 */
    18.         p {
    19.             color: blue;
    20.         }
    21.  
    22.         /* 2、通配符选择器 */
    23.         * {
    24.             color: green;
    25.         }
    26.  
    27.         /* 1、继承 */
    28.         .father {
    29.             color: red;
    30.         }
    31.     </style>
    32.  
    33. <div class="father">
    34.         <!-- 6、行内样式 -->
    35.         <p class="son" id="one" style="color: purple;">我是一个标签</p>
    36.     </div>

     

注意点：

  1. !important写在属性值的后面，分号的前面
  2. !important不能提升继承的优先级，只要是继承优先级最低
  3. 实际开发中不建议使用!important 

3.2权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式：（每一级之间不存在进位）

 比较规则：

  1. 先比较第一级数字，如果比较出来了，之后的统统不看
  2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
  3. ....
  4. 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说得算）

注意点：!important如果不是继承，则权重最高 

  1. <style>
  2.         /* #one {
  3.             color: red;
  4.         }
  6.         .son {
  7.             color: blue;
  8.         }
  10.         p {
  11.             color: green;
  12.         } */
  13.  
  14.         /* 0,1,0,1  权重最高 */
  15.         div #one {
  16.             color: orange;
  17.         }
  18.  
  19.         /* 0,0,2,0 */
  20.         .father .son {
  21.             color: skyblue;
  22.         }
  23.  
  24.         /* 0,0,1,1 */
  25.         .father p {
  26.             color: purple;
  27.         }
  28.  
  29.         /* 0,0,0,2 */
  30.         div p {
  31.             color: pink;
  32.         }
  33.     </style>
  34.  
  35.  
  36. <body>
  37.     <div class="father">
  38.         <p class="son" id="one">我是一个标签</p>
  39.     </div>
  40. </body>

 

 

拓展 权重叠加计算案例

权重计算题解题步骤：

  1. 先判断选择器是否能直接选中标签，如果不能直接选中 -->是继承，优先级最低-->直接pass
  2. 通过权重计算公式，判断谁权重最高

注意点：

  • 实际开发中选择选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己为难自己 
  • 如果全是继承的情况，就找父元素
  1.  <style>
  2.         /* 对span来说是继承 */
  3.  
  4.         /* ========================= */
  5.         /* 可以直接选中p标签 */
  6.         div p {
  7.             color: red;
  8.         }
  9.  
  10.         /* 对span来说是继承 */
  11.         /* ========================= */
  12.         /* 不可以直接选中p标签，对p标签来说是继承 */
  13.         .father {
  14.             color: blue;
  15.         }
  16.     </style>
  17.  
  18.  
  19. <body>
  20.     <div class="father">
  21.         <!-- 2、p标签的文字颜色：red -->
  22.         <p class="son">
  23.             <!-- 1、span的样式肯定是继承得来的，子承父业 span标签继承了父标签p的颜色 -->
  24.             <span>我是奥特曼</span>
  25.         </p>
  26.     </div>
  27. </body>

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号