Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选择器优先级、提权; 字体、字体图标;盒模型
Blogger Information
Blog 7
fans 0
comment 0
visits 4860
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
选择器优先级、提权; 字体、字体图标;盒模型
波元的PHP学习
Original
563 people have browsed it

伪类选择器：状态匹配

1、链接

/链接四种状态，顺序是固定的/

  • /1、默认未访问点击/
    a:link{color:blue; text-decoration:none;}
  • /2、已访问过的状态/
    a: visited{ color:violet; }
  • /3、悬停状态/
    a:hover{color:red;text-decoration:uderline}
  • /4、当鼠标点击压下时/
    1. a:active{color:red；}
    2. form p first-of-type input:first-of-type{}
    3. input:read-only{background-color:yellow}
    4. input[type=email]{background-color:lightgreen;}
    5. input:reqired{background-color:lightgreen;}
    6. input:disabled{background-color)
    2、表单
    1. <form action="">
    2. <p>用户名：<input type="" name="" value="admin" readonly></p>
    3. <p>邮箱：<input type="email" name="" value="" required></p>
    4. <p>用户名：<input type="password" name="" value="123456" disabled></p>
    3、选择器的优先级

1.当选择器相同时，与书写顺序有关，后面的样式覆盖前面的。

2.class的优先级大于tag标签。当选择器不同时，与优先级相关，级别高的覆盖级别低的。

3.如果仍想提升选择器的优先级，此时到了class级，此时到了class级，我们应该用ID级。

结论：id>class>tag

4、选择器的优先级的提升方式

1、声明顺序对优先级的影响

在后面有一个相同的声明，根据源码的顺序 ，后面有效。
2、选择器的类型对优先级的影响
思考：是不是只能用选择器类型的提权来提升优先级？
实际工作中，应该用一系列的选择器组合来灵活的设置优先级。
3、
body h2{color:skyblue} [0,0,2]
h2{color:red} [0，0，1]

规则 ： id>class>tag
有一个计算公式：[id选择器的数量，class选择器的数量，tag选择器的数量]
tag级向class级进位，class级向id级进位。
html body h2{color:red} tag已经无法提升，html是根元素，上面没有元素了。此时可以采用增加class的方法提权。

备注：一般采取重新写一段代码的方法来尝试，如果不好，可以马上恢复回去。

  1. <body>
  2. <h2 class="on off“ id="foo">hello php</h2>
  3. </body>
  4. h2.on{}    [0,1,1]
  5. body h2.on{}  [0,1,2]
  6. .on.off{}  [0,2,0]
  7. #foo{color:teal;}

5、属性的简写

  1. .title{ 
  2.         font-family:sans-serif;
  3.         font-size:24px;
  4.         font-style：italic;
  5.         font-weitght:100;
  6. **/*简写*/**
  7.     font:italic lighter 36px sans-serif;
  9. }

6、字体图标
1、可以用字体定义图标。
2、用类来定义（更简单）

  1. body{
  2.     background-color:cornsilk;
  3.     background-image:url()
  4.     background-repeat:no-repeat;
  5.     background-size:300px;
  6.     background-position:100px 200px； /*100PX距左边的距离，200PX距上面的距离。*/
  7.     background-position:top center;/*默认值是center.*/
  8. }

盒模型的属性缩写

网站本身就是由许多个矩形盒子组成的。

  1. .box{
  2.     width:200px;
  3.     height:200px;
  4.     background-color:violet;
  5.     box-sizing:border-box;    }
  6. .box{
  7. border-top-width:5px;
  8. border-top-corlor:red;
  9. border-top-style:solid;
  10. }

1、边框

每个边框可以设置三个属性：宽度，样式，颜色
边框的简写 border-top:5px red solid;
border-bottom:10px red dashed;

</h> 四个边框一样的写法
border:5px solid #000;

2、内边距

padding 上 右 下 左 顺时针方向
padding:5px 10px 15px 20px;
页面看不到是因为padding是透明的，且背景色会自动扩展到padding.
将背景色裁切到内容区
background-clip:coneten-box

当左右相等，而上下不相等，使用三值语法。
padding:10px 20px 15px
当左右相等，而上下也相等，使用二值语法。
padding:10px 30px
如果四个方向全相等，使用单值语法。
padding: 10px
总结：当使用三值和二值时，只要记住第二个永远表示左右就可以了。

3、外边距：控制多个盒子之间的排列间距

四值:顺时针，上右下左。
margin:5px 8px 10px 15px;
三值:左右相等，上下不等。
margin:10px 30px 15px;
二值：左右相等，上下也相等
margin:10px 15px;
单值：四个方向全相等
margin:10px

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