1.权重选择器

HTML部分

  1.     <h1 class="tilie" id="itme">Are you ok?</h1>

css部分

  1. /* 权重级别
  2. id:     千位
  3. class:  百位
  4. 标签:    个位 */
  7. /* (权重0,0,2) 没有class和id所以千、百位为0，有body和h1，所以标签个位为2 */
  8. body h1{
  9.     color: chartreuse;
  10. }
  12. /* (权重:0,1,0) 没有id和标签位，有class，百位为1 */
  13. .tilie{
  14.     color: blue;
  15. }
  17. /* 权重:(0,1,2)  没有id，lass百位为1，标签个数有2个，个位为2*/
  18. body h1.tilie {
  19.     color: red;
  20. }
  22. /* (权重:1,1,2)  id为1，千位有1，有class百位为1，标签个位存在2个，个位为2 */
  23. body h1#itme.tilie{
  24.     color: forestgreen;
  25. }
  27. /* !important 最高指示，忽略任何权重，调试代码时使用！ */
  28. /* h1{
  29.     color: coral !important;
  30. } */
  32. /*
  33. 最终输出结果为权重为(1,1,2)的绿色
  34. */

示例

示例图

2.结构伪类选择器参数计算过程

HTML部分

  1.     <ul class="list">
  2.         <li>itme1</li>
  3.         <li>itme2</li>
  4.         <li>itme3</li>
  5.         <li>itme4</li>
  6.         <li>itme5</li>
  7.         <li>itme6</li>
  8.         <li>itme7</li>
  9.         <li>itme8</li>
  10.     </ul>

css部分

  1. /* :nth-of-type(an+b)
  2. 1: a, 系数,[1.2.3...]
  3. 2: n, [0,1,2,3...]
  4. 3: b, 偏移量,从0开始
  5. 计算出来的索引,必须有效,从1开始  */
  8. /* 选择匹配元素只有俩种情况,
  9. 匹配一个元素,和匹配一组元素 */
  12.  /*
  13.  1.匹配一个,匹配一个元素的时候a从0开始    
  14. 所以a=0, n从从0开始,[0,1,2...],(an==0n==0),所以,{(0n+3)==(3)} 
  15. */
  16. /* .list> li:nth-of-type(0n+3){
  17.     background-color: aqua;
  18. } */
  19. /* :nth-of-type(0n+3) == :nth-of-type(3) */
  20. .list> li:nth-of-type(3){
  21.     background-color: red;
  22. }
  25. /* 2
  26. 匹配一组元素 ,匹配一组元素的时候 a=1,从1开始
  27. n从0开始,这时候(an)就不等于0,(an)就会有值
  28. 后续计算过程为:
  29.     1x0=0
  30.     1x1=1
  31.     1x2=2
  32.     1x3=3
  33.     [1,2,3]...
  34.     循环,直到所有元素都匹配完为止,就能选中一组
  35. */
  37. /* .list> li:nth-of-type(1n){
  38.     background-color: salmon;
  39. } */
  41. /* 简写 */
  42. .list > *{
  43.     background-color: forestgreen;
  44. }

效果展示

示例