Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选择器补充、提权及盒模型属性
Blogger Information
Blog 13
fans 0
comment 0
visits 9221
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
选择器补充、提权及盒模型属性
我是贝壳
Original
517 people have browsed it

1、选择器补充

在上篇分享中已说明了结构相关的伪类选择器，通过nth-of-type可以定位到页面上任何一个对象，本次主要补充状态匹配的伪类选择器。
以<a>为例，示范代码：

  1. <style>
  2. /* 链接四种状态:顺序是固定的 */
  3. /* 1. 默认,没有访问/点击 */
  4. a:link {
  5.     color: blue;
  6.     text-decoration: none;
  7. }
  8. /* 2. 已访问过的状态 */
  9. a:visited {
  10.     color: violet;
  11. }
  12.  /* 3. 悬停的状态 */
  13. a:hover {
  14.     color: red;
  15.     text-decoration: underline;
  16. }
  17. /* 4. 激活,当鼠标点击压下去的时候 */
  18. a:active {
  19.     color: green;
  20. }
  21. </style>
  22. <body>
  23.     <form action="">
  24.         <p>用户名:<input type="text" name="" value="admin" readonly autofocus></p>
  25.         <p>邮箱:<input type="email" name="" value="" required></p>
  26.         <p>密码:<input type="password" name="" value="123456" disabled></p>
  27.         <p><button>提交</button></p>
  28.     </form>
  29. </body>

2、选择器提权

在简单选择器中，按优先级排名分别为：id>class>tag，可以理解为当定位得越准确（属性越多），优先级越高。所以选择器上可以【0(id数).0(class数).0(tag数)】依次按位对比得出优先级高低。

  1. <head>
  2.     <style>
  3. /* 有一个计算公式: [id选择器的数量, class选择器的数量, tag选择器的数量] */
  4.         /* body h2: [id=0, class=0, tag=2] */
  5.         /* h2: [id=0, class=0, tag=1] */
  6.         /* tag级向class级进位,class级向id级进位 */
  7.         /* .on h2: [id=0, class=1, tag=1], [0,1,1]*/
  9.         /* 如果想继续提权,选择一个只要比body h2 权重高的选择器组合就可以了 */
  10.         /* [0,0,3] */
  11.         html body h2 {
  12.             color: skyblue;
  13.         }
  15.         /* [0,0,2] */
  16.         body h2 {
  17.             color: red;
  18.         }
  20.         /* 因为html是根元素,上面没有人 */
  21.         /* [0,1,0] */
  22.         /* .on {
  23.             color: skyblue;
  24.         } */
  26.         /* [0,0,3] */
  27.         /* html body h2 {
  28.             color: red;
  29.         } */
  32.         /* [0,1,0] */
  33.         /* .on {
  34.             color: skyblue;
  35.         } */
  38.         /* [0,1,1] */
  39.         h2.on {
  40.             color: red;
  41.         }
  43.         /* [0,1,2] */
  44.         body h2.on {
  45.             color: skyblue;
  46.         }
  48.         /* [0,1,3] */
  49.         html body h2.on {
  50.             color: teal;
  51.         }
  53.         /* [0,2,3] */
  54.         .on.off {
  55.             color: red;
  56.         }
  58.         /* [1,0,0] */
  59.         #foo {
  60.             color: teal;
  61.         }
  63.         /* [1,0,1] */
  64.         h2#foo {
  65.             color: red;
  66.         }
  68.         /* [1,1,0] */
  69.         #foo.on {
  70.             color: seagreen;
  71.         }
  73.         /* [1,0,3] */
  74.         html body h2#foo {
  75.             color: red;
  76.         }
  78.         /* [1,0,2] */
  79.         body h2#foo {
  80.             color: blue;
  81.         }
  82.     </style>
  83. </head>
  85. <body>
  86. <!-- h2标签定义了两个class属性，用空格隔开 -->
  87.     <h2 class="on off" id="foo">hello php.cn</h2>
  88. </body>

3、盒模型属性缩写

在盒子模型中，padding与margin可以按照顺时针分别定义上、右、下、左的四边属性。规律如下：

  1. .box {
  2. /* 内边距 */
  3. /* padding: 上 右 下 左; 按顺时针方向*/
  4. padding: 5px 10px 15px 20px;
  5. /* 页面看不到是因为padding是透明的,且背景色会自动扩展到padding */
  6. /* 将背景色裁切到到内容区 */
  7. background-clip: content-box;
  8. /* 当左右相等，而上下不相等，使用三值语法 */
  9. padding: 10px 20px 15px;
  10. /* 当左右相等，上下也相等，使用二值语法 */
  11. padding: 10px 30px;
  12. /* 如果四个方向全相等，使用单值语法 */
  13.  padding: 10px;
  15. /* 总结,当使用三值和二值时,只需要记住第二个永远表示左右就可以了 */
  16. }

对于单边的属性，可以单独写每一个属性的名值对，也可以用复合属性的写法，后者更常用：

  1. .box {
  2. /* 边框 */
  3. /* 每个边框可以设置三个属性: 宽度,样式,颜色 */
  4. /* border-top-width: 5px;
  5. border-top-color: red;
  6. border-top-style: solid; */
  7. /* border-top: 5px red solid; */
  8. border-top: rgb(255, 0, 255) solid 5px;
  9. border-bottom: 10px red dashed;
  10. border: 5px solid #000;
  11. }
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