ASCII码 ASCII码

选择器权重及伪类选择器练习

发布于：2022-03-23 09:26:23  栏目：技术文档

权重练习

代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.         <style>
  9.          /* 权重计算为（0,0,2） */
  10.            span,p { 
  11.                 background-color: aquamarine;  
  12.            }
  13.         /* 权重计算为（0,1,0） */
  14.            .box{    
  15.                color: red;  
  16.            }
  17.         /* 权重计算为（0,1,1） */
  18.            .box > span{
  19.                 color:blue;
  21.            }
  22.         /* 权重计算为（1,0,0） */
  24.            #s3{
  25.                 color:green;
  27.            }
  28.         /* 权重计算为（1,1,1）比（1,0,0）大 可以覆盖单纯id选择器的样式 */
  30.            .box>.s3#s3 {
  31.                 color: darkviolet;
  32.            }
  33.         /* 调试样式表的权重最高无视所有选择器 */
  34.            .s5{
  35.                 color: black !important;
  37.            }
  38.         </style>
  40. </head>
  41. <body>
  42. <div class="box"><span>s1</span></div>
  43. <div class="box"><p>p2</p></div>
  44. <div class="box"><span id="s3">s3</span></div>
  45. <div class="box"><span class="s3" id="s3">s3</span></div>
  46. <div class="box"><span class="s5" id="s3">s5</span></div>
  47. </body>
  48. </html>

代码效果图

伪类选择器练习

代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /* 根据:nth-of-type(an+b)计算公式[an+b]取一组偶数，a=2 n=n b=0 则计算公式为[2n+0] 
  10.         又因计数器n的取值必须是有效的, 且从 1 开始的正整数 即为 2*1 2*2 2*3 2*4 ...以此类推    
  11.         简化为:nth-of-type（2n）的公式为取偶数的公式 同理:nth-of-type（2n+1）为取偶数的公式 */
  13.         .list > :nth-of-type(2n){
  14.             color: red;
  16.         }
  17.         .list > :nth-of-type(2n+1){
  18.             color:aqua;
  20.         }
  22.         .list > :nth-last-of-type(2){
  24.             color:blue;
  25.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <ul class="list">
  31.         <li>item1</li>
  32.         <li>item2</li>
  33.         <li>item3</li>
  34.         <li>item4</li>
  35.         <li>item5</li>
  36.         <li>item6</li>
  37.         <li>item7</li>
  38.         <li>item8</li>
  39.         <li>item9</li>
  40.     </ul>
  41. </body>
  42. </html>

代码效果图

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行