样式的继承+选择器的优先级+伪类的优先级

心已赠人 2021-11-17 17:38 356阅读 0赞

1.样式的继承

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style type="text/css">
     7         
     8        </style>
     9     </head>
    10     <body>
    11         
    17         <p style="font-size: 30px;">
    18             abc1
    19             <span>abc2</span>
    20         </p>
    21         <span>abc3</span>
    22         <div style="background-color: aqua;">
    23             <p>
    24                 abc4
    25                 <span>abc5</span>
    26             </p>
    27         </div>
    28     </body>
    29 </html>

2.选择器的继承

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style type="text/css">
     7         .p1{
         
     8             background-color: yellow;
     9         }
    10         p{
         
    11             background-color: red;
    12         }
    13         #p2{
         
    14             background-color: yellowgreen;
    15         }
    16         p#p2{
         
    17             background-color: aquamarine;
    18         }
    19         *{
         
    20             font-size: 50px;
    21         }
    22         p{
         
    23             font-size: 10px;
    24         }
    25         /*
    26         当使用不同的选择器，选中同一个元素时并且设置相同的样式时，
    27         这时样式之间产生了冲突，由选择器的优先级（权重）决定，
    28         优先级高的优先显示
    29         1.优先级的规则
    30         内联样式   优先级 1000  <p style="background-color: aqua;">
    31         id选择器   优先级 100   id="p2"
    32         类和伪类   优先级 10    .p1
    33         元素选择器 优先级 1      p
    34         通配*      优先级 0     *     比继承优先级要高
    35         
    36         2.当选择器中包含多种选择器时，需要将多种选择器的优先级相加后再比较
    37         但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级的一样
    38         则使用靠后的样式
    39         
    40         3.并集选择器的优先级是单独计算
    41         div p #p1 hello{}
    42         
    43         4.可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级
    44         将会优先于所有的样式显示，甚至超过内联样式，但是在开发中避免使用!important，不方便后期维护
    45         */
    46        </style>
    47     </head>
    48     <body>
    49         <p id="p2" class="p1" style="background-color: aqua;">123</p>
    50         <p id="p2" class="p1">123</p>
    51         <p class="p1">123</p>
    52         <p>
    53             <div>
    54                 123
    55             </div>
    56         </p>
    57     </body>
    58 </html>

3.伪类的优先级

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style type="text/css">
     7         a:link{
         
     8             color: aqua;
     9         }
    10         a:visited{
         
    11             color: cadetblue;
    12         }
    13         a:hover{
         
    14             color: aquamarine;
    15         }
    16         a:active{
         
    17             color: blanchedalmond;
    18         }
    19         /*
    20         涉及到a的伪类一共有四个：
    21         :link
    22         :visited
    23         :hover
    24         :active
    25         而这四个选择器的优先级是一样的
    26         写在下面的可以把写在上面的覆盖掉
    27         */
    28        </style>
    29     </head>
    30     <body>
    31         <a href="http://www.baidu.com.cn">访问过的链接</a>
    32         <br />
    33         <a href="http://ww.baidu.com.cn">未访问过的链接</a>
    34     </body>
    35 </html>

转载于:https://www.cnblogs.com/zuiaimiusi/p/11163239.html