博客列表 >选择器提权方式;字体与字体图标;盒模型常用属性的缩写方案

选择器提权方式;字体与字体图标;盒模型常用属性的缩写方案

庄周梦蝶
庄周梦蝶原创
2020年12月22日 19:40:35533浏览

选择器的优先级

在一样的标签下,根据代码的上下解析,谁在最后谁显示。

  1. <style>
  2. h2 {color:red;}
  3. h2 {color:yellow;}
  4. </style>
  5. <body>
  6. <h2>百度</h2>
  7. </body>

最后显示百度字体颜色为黄色

在组合选择器中,ID>class>标签,浏览器会根据他们的数量来比较大小,可以把它比成数字[id的数量.class的数量.标签的数量]谁大谁显示。不管同级有多少个,都比不过比它大的一级

  1. <style>
  2. body h2 {color:red;}
  3. h2 {color:yellow;}
  4. </style>
  5. <body>
  6. <h2 class="on" id="foo">百度</h2>
  7. </body>

解析:最终h2会显示红色,因为第一个有两个标签,所以不会按照先后顺序显示


  1. <style>
  2. body h2 {color:red;}
  3. h2.on {color:yellow;}
  4. </style>
  5. <body>
  6. <h2 class="on" id="foo">百度</h2>
  7. </body>

解析:最终h2会显示为黄色,因为第二个有class选择器[0.1.0],比第一个[0.0.2]大


  1. <style>
  2. body h2 {color:red;}
  3. :root h2 {color:yellow;}
  4. </style>
  5. <body>
  6. <h2 class="on" id="foo">百度</h2>
  7. </body>

解析:最终h2会显示为黄色,因为第二个的伪类选择器也是类相当于class[0.1.0],比第一个[0.0.2]大


  1. <style>
  2. #foo body h2 {color:red;}
  3. h2.on {color:yellow;}
  4. </style>
  5. <body>
  6. <h2 class="on" id="foo">百度</h2>
  7. </body>

解析:最终h2是红色,因为第一个有id选择器[1.0.2],比第二个[0.1.1]大

实例演示字体与字体图标

  1. <style>
  2. .font {
  3. font: italic lighter 36px sans-serif;
  4. }
  5. </style>
  6. <script src="font/iconfont.js"></script>
  7. <style>
  8. .icon {
  9. width: 10em;
  10. height: 10em;
  11. vertical-align: -0.15em;
  12. fill: currentColor;
  13. overflow: hidden;
  14. }
  15. </style>
  16. <body>
  17. <h2 class="font">PHP中文网真是个好地方</h2>
  18. <svg class="icon" aria-hidden="true">
  19. <use xlink:href="#icon-1"></use>
  20. </svg>
  21. <svg class="icon" aria-hidden="true">
  22. <use xlink:href="#icon-2"></use>
  23. </svg>
  24. </body>


盒模型属性简写

边框简写,直接用border来设置四周的边框,里面的值分别是尺寸、颜色和样式、缺一不可。

  1. <style>
  2. .box{border: 10px red solid;}
  3. </style>

内边距简写

  1. <style>
  2. 四个值,里面的值分别是上、右、下、左
  3. .box{padding:5px 10px 15px 20px;}
  4. 三个值,分别是上、左右、下
  5. .box{padding:5px 15px 20px;}
  6. 两个值,分别是上下、左右、下
  7. .box{padding:15px 20px;}
  8. </style>

外边距简写

  1. <style>
  2. 四个值,里面的值分别是上、右、下、左
  3. .box{margin:5px 10px 15px 20px;}
  4. 三个值,分别是上、左右、下
  5. .box{margin:5px 15px 20px;}
  6. 两个值,分别是上下、左右、下
  7. .box{margin:15px 20px;}
  8. </style>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议