Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > CSS 权重与结构伪类
Blogger Information
Blog 25
fans 0
comment 0
visits 10714
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS 权重与结构伪类
PHui
Original
325 people have browsed it

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. }

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：有注意到你每次作业完成的都很好, 继续加油 , 态度决定一切
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post