学习HTML与CSS的第五天————样式的继承、选择器的优先级_关于样式的继承，以下样式中，祖先元素的哪些样式不会被后代元素继承？-CSDN博客

本文链接：https://blog.csdn.net/weixin_44055237/article/details/104524093

样式的继承

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title>样式的继承</title>
      <style type="text/css"> 
      body{
        font-size: 20px;
      }
      </style>
    </head>
    <body>
      <!-- 
            向儿子可以继承父亲的遗产一样，在CSS中祖先元素的样式也会被他的后代元素所继承
            利用继承可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式

            但是并不是所有的样式都会被子元素继承，比如：背景相关的样式都不会被继承、边框相关的样式、定位相关的样式
         -->
       <div style="background-color: yellow;">
        <p>
          我是p标签中的文字
          <br />
          <span>我是span中的文字</span>
        </p>
       </div>
       <span>我是span中的文字</span>
    </body>
</html>

选择器的优先级

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title>样式的继承</title>
      <style type="text/css"> 
      .p1{
        background-color: yellow;
      }
      p{
        background-color: red;
      }
      #p{
        background-color: green;
      }
      /*
        当使用不同的选择器，选中同一个元素时并且设置相同的样式时，
          这时样式之间产生了冲突，最终由选择器的优先级（权重）决定
          优先级高的优先显示


          优先级的规则：
                内敛样式，优先级为1000
                id选择器，优先级100
                类和伪类。优先级10
                元素选择器。优先级1
                通类*，优先级0
                继承的样式，没有优先级


          当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较
              但是要注意，选择器的优先级计算不会超过它最大的数量级，如果选择器的优先级一样，选择较为靠后的样式

          
          并集选择器的优先级时单独计算
          div 、 p、。。。

          可以再样式的最后，添加一个!important，此时该样式就获得了最高的优先级
          将会优先于所有的样式显示甚至超过内敛样式
          但是尽量不适用!important
       */
      </style>
    </head>
    <body>
      <p class="p1" id="p">我是一个段落 </p>
    </body>
</html>