博客列表 >选择器优先级及字体属性和盒模型属性的缩写

选择器优先级及字体属性和盒模型属性的缩写

手机用户1607314868
手机用户1607314868原创
2020年12月18日 02:21:05565浏览

选择器组合实现优先级提权方式

选择器类型对优先级的影响 ?
答:id选择器>class选择器>tag选择器
实际工作中,应该用一系列的选择器组合来灵活的设置优先级
如果都是标签选择器,为什么后面的无效,一定有一个规则?

  1. body h2{
  2. color:skyblue;
  3. }
  4. h2{
  5. color:red;
  6. }

有一个计算公式[id选择器数量,class选择器数量,tag选择器数量]
数量越多,权重越大,优先级越高!

  1. body h2:[id=0,class=0,tag=2];有body和h2两个标签
  2. h2[id=0,class=0,tag=1];有h2一个标签
  3. 第一个h2比第二个h2标签数量多所以权重大,优先级高
  4. tag选择器优先级进位是class选择器,class选择器进位是id选择器
  5. .on h2[id=0,class=1,tag=1];
  6. 就比body h2优先级高
  7. <body>
  8. <h2 class="on off" id="foo">
  9. hello
  10. </h2>
  11. </body>

字体和字体图标

  1. <style>
  2. /*字体属性*/
  3. .title{
  4. /*字体*/
  5. font-family:sans-serif;
  6. /* 大小 */
  7. font-size: 24px;
  8. /* 样式 */
  9. font-style: italic;
  10. /* 粗细 */
  11. font-weight: lighter;
  12. /*可以简写为*/
  13. font:italic lighter 36px sans-serif;
  14. }
  15. body{
  16. /* 颜色 */
  17. background-color: cornsilk;
  18. /* 图片 */
  19. background-image: url(https://www.baidu.com/1.jpg);
  20. /* 重复 */
  21. background-repeat: no-repeat;
  22. /* 大小 */
  23. background-size: 300px;
  24. /* 位置 */
  25. background-position: 100px 200px;
  26. /* 简写 */
  27. background: no-repeat red;
  28. }
  29. </style>
  30. <body>
  31. <h2 class="title">
  32. php中文网
  33. </h2>
  34. </body>

盒模型常用属性的缩写

盒模型是div,可以设置边框,内边距,外边距

  1. div边框设置
  2. border-top指的是上边框
  3. border-bottom指的是下边框
  4. border-left指的是左边框
  5. border-right指的是右边框
  6. 可以单独设置也可以缩写为
  7. border:1px solid red;指的是宽度,样式,颜色
  8. padding:上 右 下 左;内边距
  9. 当左右相等,而上下不相等,用三值语法
  10. padding:上 右左 下;
  11. 当左右相等,上下相等,用二值语法
  12. padding:上下 左右;
  13. margin是外边距 跟padding内边距用法一样

总结:
padding和margin不管是三值语法还是二值语法 第二个值永远是值右左的值!

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议