选择器权重，伪类选择器计算

1.选择器权重

  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>选择器权重</title>
  8. </head>
  9. <style>
  10.     /* 1,1,1    1个id,1个class,1个tag */
  11.     h1#hello.hello{
  12.         color: firebrick;
  13.         background-color: deepskyblue;
  14.     }
  15.     /* 1,0,0    1个id */
  16.     #hello{
  17.         background-color: crimson;
  18.     }
  19.     /* 0,1,0    1个class */
  20.     .hello{
  21.         background-color: cornflowerblue;
  22.     }
  23.     /* 0,0,2    2个tag */
  24.     body h1{
  25.         color: chocolate;
  26.     }
  27.     /* 0,0,1    1个tag */
  28.     h1{
  29.         color: chartreuse;
  30.     }
  31. </style>
  32. <body>
  33.     <h1 id="hello" class="hello">Hello World</h1>
  34. </body>
  35. </html>

2.伪类选择器计算

  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>伪类选择器计算</title>
  8. </head>
  9. <style>
  10.     /* 后代里的第一个元素 <li>item5-1</li> */
  11.     ul>li ul>li:first-of-type{
  12.         color: red;
  13.     }
  14.     /* 后代里的最后一个元素 <li>item5-3</li> */
  15.     ul ul>li:last-of-type{
  16.         color: blue;
  17.     }
  18.     /* 2n+1 的计算方式为
  19.     2*0+1 = 1
  20.     2*1+1 = 3
  21.     2*2+1 = 5
  22.     2*3+1 = 7
  23.     ...
  24.     所以实际是选中奇数行
  25.     */
  26.     ul>li:nth-of-type(2n+1){
  27.         color: lightcoral;
  28.     }
  29.     /* -n+2 的计算方式为
  30.     -1*0+2 = 2
  31.     -1*1+2 = 1
  32.     -1*2+2 = 0
  33.     所以实际是选中前2行
  34.     */
  35.     ul>li:nth-of-type(-n+2){
  36.         background-color: blueviolet;
  37.     }
  38. </style>
  39. <body>
  40.     <ul>
  41.         <li>item1</li>
  42.         <li>item2</li>
  43.         <li>item3</li>
  44.         <li>item4</li>
  45.         <li>item5
  46.             <ul>
  47.                 <li>item5-1</li>
  48.                 <li>item5-2</li>
  49.                 <li>item5-3</li>
  50.             </ul>
  51.         </li>
  52.         <li>item6</li>
  53.         <li>item7</li>
  54.         <li>item8</li>
  55.         <li>item9</li>
  56.     </ul>
  57. </body>
  58. </html>