search

博客列表 >权重的原理与结构伪类

权重的原理与结构伪类

手机用户1594223549
手机用户1594223549原创
2022年10月22日 14:36:44305浏览

## ### 一.实例演示权重的原理和计算方法

1.实例输出结果

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>选择器的权重原理与计算方式</title>
  8.     <link rel="stylesheet" href="css/weight.css" />
  9. </head>
  10. <body>
  11.     <div class="col-md-6 bgc yellow">Header</div>
  12. </body>
  13. </html>

3.css代码

  1. /* ! 1.选择器权重的原理及计算方法 */
  3. /* ? (1) 实体标记：id, class, tag */
  4. /* ? (2) 排列顺序:id, class, tag  */
  5. /* ? (3) 计数方式：根据选择器中的实体标记数量计数 */
  7. /* ! 2.选择器权重的实例演示 */
  9. /* ? (1) 权重的表示方法 */
  11. /* * id = #active = 1 */
  12. /* * class = .top,.title = 2 */
  13. /* * tag = header,h1,div = 3 */
  14. /* * 所以此案例权重为（1,2,3） */
  16. header.top h1.title div#active {
  17.   color: red;
  18. }
  20. /* ? (2)权重的优先级 */
  22. /* 0,0,1 */
  23. h1 {
  24.     color: red;
  25.   }
  27. /* 0,0,1 */ 
  28.   h1 {
  29.     color: yellow;
  30.   }
  32. /* * 根据css规则,层叠样式,后面的样式,会覆盖前面的样式 */
  33. /* * 但是该方案会导致自定义样式规则,依赖书写位置和书写顺序 */
  35. /* * 可以将h1(0,0,1)权重提升至大于(0,0,1)即可 */
  36. /* * 将`h1`改为`body h1`,便可摆脱依赖书写位置和顺序 */
  38. body h1 {
  39.     color: yellow;
  40.   }
  42. /* ? (3)尽量不要在 `html` 中使用 `id`属性 */
  44. /* * id 权重过大, 位于权重顶端  */
  45. /* * id 会导致选择器失去弹性/弹性不足, 不利于调试或复用 */
  47. /* ? (4)权重经典应用场景:class 动态调整样式案例如下 */
  49. .col-md-6 {
  50.     height: 5em;
  51.     border: 3px solid;
  52.   }
  54. /* * 如果需要修改 .col-md-6.bgc 的样式 */
  55. /* * 通过修改源码或者提高权重的方法都不可取 */
  56. /* * 最小的代价就是修改html源码,添加自定义分类 */
  58.   .col-md-6.bgc {
  59.     background-color: lightgreen;
  60.   }
  62.   .col-md-6.yellow {
  63.     color: yellow;
  64.   }

二.实例结构伪类演示

1.实例输入结果

(1)简单结构伪类匹配第1个

(2)简单结构伪类匹配第2个

(3)简单结构伪类匹配最后1个

(4)结构伪类语法糖匹配第1个

(5)结构伪类语法糖匹配最后1个

(6)结构伪类an+b正向匹配全部

(7)结构伪类an+b正向匹配第3个到最后1个

(8)结构伪类反向匹配前3个

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>结构伪类</title>
  8.     <link rel="stylesheet" href="css/fake-class.css" />
  9.   </head>
  10.   <body>
  11.     <ul class="list">
  12.       <li class="li">item1</li>
  13.       <li class="li">item2</li>
  14.       <li class="li">item3</li>
  15.       <li class="li">item4</li>
  16.       <li class="li">item5</li>
  17.       <li class="li">item6</li>
  18.     </ul>
  19.   </body>
  20. </html>

3.css代码

  1. /* ! 1.结构伪类-简单匹配 */
  2. /* ? （1）用伪类匹配第1个 */
  3. /* .list > li:nth-of-type(1) {
  4.     background-color: lightblue;
  5. } */
  7. /* ? （2）用伪类匹配第2个 */
  8. /* .list > li:nth-of-type(2) {
  9.     background-color: lightblue; */
  11. /* ? ..... */
  12. /* ? （3）用伪类匹配最后一个 */
  13. /* .list > li:nth-of-type(6) {
  14.     background-color: lightblue; */
  16. /* ! 2.结构伪类-复杂匹配 */
  17. /* ? (1)匹配第一个和最后一个:用语法糖 */
  19. /* * 匹配第1个 */
  20. /* .list > li:first-of-type {
  21.     background-color: lightblue;
  22. } */
  24. /* * 匹配最后1个 */
  25. /* .list > li:last-of-type {
  26.     background-color: lightblue;
  27. } */
  29. /* ? (2)通过 :nth-of-type(an + b) 匹配前三个 */
  30. /* a系数,n参数,b偏移量从0开始,计算出来的索引必须是有效的(从1开始) */
  32. /* * 匹配第1个 */
  33. /* .list > li:nth-of-type(0n+1) {
  34.     background-color:lightblue ;
  35. } */
  37. /* * 匹配第3个 */
  38. /* .list > li:nth-of-type(0n+3) {
  39.     background-color:lightblue ;
  40. } */
  42. /* * 匹配全部用正向匹配(a=1) */
  43. /* a=1,n不变,b从0开始 */
  44. /* .list > li:nth-of-type(1n+0) {
  45.     background-color:lightblue; */
  47. /* * 匹配第4个-第6个用正向匹配(a=1) */
  48. /* .list > li:nth-of-type(1n+3) {
  49.     background-color: lightblue;
  50. } */
  52. /* * 匹配前三个用反向匹配(a=-1)*/
  53. .list > li:nth-of-type(-1n + 3) {
  54.     background-color: lightblue;
  55.   }
上一条：1. 实例演示权重的原理与计算方式下一条：表单常见状态伪类和盒模型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多