search

博客列表 >选择器补充、提权及盒模型属性

选择器补充、提权及盒模型属性

我是贝壳
我是贝壳原创
2020年12月21日 12:05:24516浏览

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. }
上一条：学习em rem vh vw与响应式布局下一条：俗还是雅？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多