search

博客列表 >选择器组合实现优先级提权及常用属性缩写

选择器组合实现优先级提权及常用属性缩写

空瓶子
空瓶子原创
2020年12月17日 15:09:33771浏览

选择器组合实现优先级提权及常用属性缩写

1.实例演示选择器组合实现优先级提权方式; 2.实例演示字体与字体图标;3.实例演示盒模型常用属性的缩写方案

1.实例演示选择器组合实现优先级提权方式

HTML 代码

  1. <body>
  2.     <h2 class="on" id="foo">PHP是世界上最美的编程语言</h2>
  3. </body>
  • 选择器相同时

    当选择器相同时，与书写顺序有关，后面的选择器会覆盖前面的选择器

css 代码

  1. h2 {
  2.     color: blue;
  3.    }
  5. h2 {
  6.     color: red;
  7.    }

效果演示

  • 单选择器不同时

    当选择器不同时，优先级高的选择器会覆盖优先级低的选择器
    选择器的优先级从高到低顺序是 id > calls > tag

css 代码

  1.  h2 {
  2.     color: red;
  3.     }
  5. .on {
  6.     color: violet;
  7.     }
  9. #foo {
  10.     color: gold;
  11.      }

效果演示

2.不同选择器的组合优先级问题

如何前面的选择器提权？
提权规则:
id > class > tag
有一个计算公式: [id 选择器的数量, class 选择器的数量, tag 选择器的数量]

  • 案例 1 [0,0,2]vs[0,0,1]
    css 代码
  1. body h2 {
  2.         color: blue;
  3.       }
  5. h2 {
  6.    color: red;
  7.    }

效果演示

  • 案例 2[0,1,0]vs[0,0,2]
    css 代码
  1. body h2 {
  2.         color: blue;
  3.       }
  5. .on {
  6.     color: green;
  7.     }

效果演示

  • 案例 3[1,0,0][0,1,0]vs[0,0,2]
    css 代码
  1. body h2 {
  2.   color: blue;
  3.     }
  4. .on {
  5.     color: green;
  6.     }
  7. #foo {
  8.     color: gold;
  9.     }

效果演示

3.多种选择器的提权

演示代码

  1. <style>
  2.       body h2 {
  3.         color: blue;
  4.       }
  5.       .on {
  6.         color: green;
  7.       }
  8.       h2.on {
  9.         color: violet;
  10.       }
  11.       body h2.on {
  12.         color: teal;
  13.       }
  14.       #foo {
  15.         color: gold;
  16.       }
  17.       #foo.on {
  18.         color: tomato;
  19.       }
  20.       h2#foo.on {
  21.         color: yellowgreen;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <h2 class="on" id="foo">PHP是世界上最美的编程语言</h2>
  27.   </body>

演示效果图

小结 :
1、当选择器的类型和数量相同时，根据书写顺序，后面的选择器会覆盖前面的选择器
2、单选择器类型不同时根据 id>calss>tag 的基本原则以及对应选择器数量来判断
不同类型选择器优先级越高，他的权越大；相同类型的选择器数量越多，他的权越大

4.实例演示字体

字体常用属性主要有：字体（宋体、黑体等）、大小（字号大小）、粗细、样式

html 代码

  1.   <body>
  2.     <h2>PHP是世界上最美的编程语言</h2>
  3.     <span class="iconfont icon-kehuguanli"></span>
  4.   </body>

css 代码

  1. h2 {
  2.     font-size: 4em; /* 字体大小 */
  3.     font-weight: 500; /* 字体粗细 */
  4.     font-family: sans-serif; /* 字体（宋体、黑体等） */
  5.     font-style: italic; /* 字体样式 */
  7.     /* 字体属性可以简写为 */
  8.     font: italic 500 4em sans-serif;
  9.     /* 书写顺序为：样式、粗细、大小、字体；顺序不能颠倒 */
  10.     }

效果演示

注意：书写顺序为：样式、粗细、大小、字体；顺序不能颠倒

5.字体图标

css 代码

  1. .iconfont.icon-kehuguanli {
  2.     color:skyblue;
  3.     font-size: 50px;
  4.     }

6.实例演示盒模型常用属性的缩写方案

html 代码

  1. <body>
  2.     <div class="box"></div>
  3. </body>

css 代码

  1.       .box {
  2.         width: 200px;
  3.         height: 200px;
  4.         background-color: skyblue;
  5.         box-sizing: border-box;
  6.         /* 将背景色裁切到到内容区 */
  7.         background-clip: content-box;
  8.       }

效果演示

  • 边框 border

    每个边框可以设置三个属性: 宽度,样式,颜色
    css 代码

    1. .box {
    2.   /* 边框border */
    3.   /* 每个边框可以设置三个属性: 宽度,样式,颜色 */
    4.   border-top-width: 5px;
    5.   border-top-style: dotted;
    6.   border-top-color: red;
    7.   }
    8. .box {
    9.   /* 边框四周 */
    10.   border-width: 5px;
    11.   border-style: dotted;
    12.   border-color: red;
    13.   /* 简写 */
    14.   border: fuchsia 5px solid;
    15.   }

  • 内边距 padding

    内边距有上下左右四个边距
    css 代码

    1. .box {
    2.   padding-top: 5px;
    3.   padding-right: 10px;
    4.   padding-bottom: 15px;
    5.   padding-left: 20px;
    6.   }

  • 内边距的简写
    css 代码

  1. .box {
  2.     /* 内边距简写 */
  3.     padding: 8px 10px 15px 20px;
  4.     /* 用三值法设置内边距 */
  5.     padding: 10px 15px 20px;
  6.     /* 用二值法设置内边距 */
  7.     padding: 10px 15px;
  8.     /* 用单值法设置内边距 */
  9.     padding: 15px;
  10.     }

三值法
二值法
单值法

总结,当使用三值和二值时,只需要记住第二个永远表示左右就可以了
当使用二值法事遵循下同上，左同右

上一条：《选择器优先级与属性简写方式》20201216下一条：选择器的优先级，字体图标的应用，盒模型常用属性的缩写。
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多