Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选择器优先级及字体属性和盒模型属性的缩写
Blogger Information
Blog 37
fans 0
comment 0
visits 34782
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
选择器优先级及字体属性和盒模型属性的缩写
手机用户1607314868
Original
566 people have browsed it

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

选择器类型对优先级的影响 ？
答：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;指的是宽度，样式，颜色
  9. padding：上 右 下 左；内边距
  10. 当左右相等，而上下不相等，用三值语法
  11. padding：上  右左  下；
  12. 当左右相等，上下相等，用二值语法
  13. padding:上下  左右；
  14. margin是外边距 跟padding内边距用法一样

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

Correcting teacher：天蓬老师天蓬老师

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