search

博客列表 >CSS 权重与结构伪类

CSS 权重与结构伪类

PHui
PHui原创
2022年10月21日 15:01:28322浏览

1. 实例演示权重的原理与计算方式

CSS

  1. /* ! 选择器权重 */
  2. /* ? 1. 实体标记: id, class, tag */
  3. /* ? 2. 排列顺序: id, class, tag */
  4. /* ? 3. 记数方式: 选择器中的实体标记数量 */
  6. /* ! 1. 权重表示方法 */
  7. /* ? ( 0,   0,   1 ):  id=>0, class=>0,tag=>1 */
  8. /* ? id = null = 0 */
  9. /* ? class = null = 0 */
  10. /* ? tag = h1 =  1*/
  11. h1 {
  12.   color: aliceblue;
  13. }
  15. /* ? (0,1,1) = id=>0,class=>1, tag=>1 */
  16. /* ? id = null = 0 */
  17. /* ? class = title = 1 */
  18. /* ? tag = h1 =  1*/
  19. h1.title {
  20.   color: red;
  21. }
  23. /* ? ( 1, 1, 1) = id=>1,class=>1,tag=>1*/
  24. /* ? id = active = 1 */
  25. /* ? class = title = 1 */
  26. /* ? tag = h1 = 1 */
  27. h1#active.title {
  28.   color: red;
  29. }
  31. /* ! 2. 权重优先级 */
  32. /* ? (0,0,1) , (0,0,2) : (0,0,2)权重大 */
  33. h1 {
  34.   color: red;
  35. }
  36. body h1 {
  37.   color: blue;
  38. }
  40. /* ! 3. 权重注意事项: 尽量不要在 `html` 中使用 `id`属性 */
  41. /* ? 1. id 权重过大, 位于权重顶端 */
  42. /* ? 2. id 会导致选择器失去弹性/弹性不足, 不利于调试或复用 */

2. 实例演示结构伪类,通过位置关系匹配子元素

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.     <link rel="stylesheet" href="css/fake.css" />
  9.   </head>
  10.   <body>
  11.     <ul class="list">
  12.       <li class="item">item1</li>
  13.       <li class="item">item2</li>
  14.       <li class="item">item3</li>
  15.       <li class="item">
  16.         item4
  17.         <ul>
  18.           <li class="item">item4-1</li>
  19.           <li class="item">item4-2</li>
  20.           <li class="item">item4-3</li>
  21.         </ul>
  22.       </li>
  23.       <li class="item">item5</li>
  24.       <li class="item">item6</li>
  25.       <li class="item">item7</li>
  26.       <li class="item">item8</li>
  27.     </ul>
  28.   </body>
  29. </html>

CSS

  1. /* 
  2. ! :nth-of-type(an + b) 
  3. * 1. a: 系数
  4. * 2. n: 参数
  5. * 3. b: 偏移量
  6. */
  7. /* ? a = 0 : 匹配一个 */
  8. /* ? 匹配第3个 */
  9. .list > li:nth-of-type(3) {
  10.   background-color: lightgreen;
  11. }
  13. /* ? a =1 : 匹配一组(正向) */
  14. /* ? 从第六个开始匹配到最后一个 */
  15. .list > li:nth-of-type(n + 6) {
  16.   background-color: lightblue;
  17. }
  19. /* ? a =-1 : 匹配一组(反向) */
  20. /* ? 从第二个开始匹配到第一个 */
  21. .list > li:nth-of-type(-n + 2) {
  22.   background-color: lightyellow;
  23. }
  25. /* ? 快速获取第一个和最后一个: 语法糖 */
  26. /* 第1个 */
  27. .list > li:first-of-type {
  28.   background-color: lightgreen;
  29. }
  30. /* 最后1个 */
  31. .list > li:last-of-type {
  32.   background-color: lightgreen;
  33. }

上一条：1020 css权重和选择器作业下一条：1. 实例演示权重的原理与计算方式 2. 实例演示结构伪类,通过位置关系匹配子元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多