Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css选择器的优先级提权、字体属性简写、盒子模型缩写方案
Blogger Information
Blog 9
fans 0
comment 0
visits 8009
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
css选择器的优先级提权、字体属性简写、盒子模型缩写方案
扬cium
Original
632 people have browsed it

一. css伪类选择器：状态匹配

链接四种状态，顺序是固定的（1.2.3.4）

  1. a:link {color: #FF0000}/ 默认未访问的链接 /
  2. a:visited {color: #00FF00} / 已访问的链接 /
  3. a:hover {color: #FF00FF} / 鼠标悬停或移动到链接上 /
  4. a:active {color: #0000FF} / 鼠标点击选定的链接 /

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

二.选择器的优先级

选择器优先级：id > class > tag

  1. 当选择器相同的时,与书写顺序有关,后面的样式覆盖前面的
  2. 当选择器不同时,与优先级相关,级别高的覆盖级别低
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>选择器优先级</title>
  7.     <style>
  8.         h2 {
  9.             color: blue;
  10.         }
  11.         h2 {
  12.             color: cadetblue;
  13.         }
  14.          /* 当选择器相同时，后面的样式覆盖前面的 */
  16.         .one {
  17.             color: crimson;
  18.         }
  19.         #two {
  20.             color: darkmagenta;
  21.         }
  22.         /* 当选择器不同时，级别高的id覆盖级别低的class
  23.         结论：id > class >tag */
  24.         /*注意： !important: 虽然可以提权，却不是选择器 */
  26.     </style>
  27. </head>
  28. <body>
  29.     <h2 class="one" id="two">选择器的优先级</h2>
  30. </body>
  31. </html>

三.选择器的优先级提权方式

1.相同声明顺序的优先级，后面的覆盖前面的样式
2.选择器的类型对优先级 按id>class>tag的方式进行覆盖
3.通过组合选择器来提升优先级

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>选择器优先级的提权方式</title>
  7.     <style>
  9.         body h2 {
  10.             color: darkturquoise;
  11.         }
  12.         h2.one {
  13.             color: fuchsia;
  14.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <h2 class="one" id="two">选择器优先级的提权方式</h2>
  20. </body>
  21. </html>

h2.one 会覆盖 body h2 的样式

计算公式: [id选择器的数量, class选择器的数量, tag选择器的数量]
h2.one [id=0, class=1, tag=1]或以[0,1,1]表示
body h2 [id=0, class=0, tag=2]或以[0,0,1]表示

tag级向class级进位,class级向id级进位

四.实例演示字体与字体图标

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="icon-font/iconfont.css">
  8.     <title>属性的简写</title>
  9.     <style>
  10.     .h3{
  11.         color: slateblue;
  12.         font-family: sans-serif;
  13.         font-size: 24px;
  14.         /* font-style: italic;斜体 */
  15.         font-style: italic;
  16.         /* font-weight: bolder;粗体 */
  17.         font-weight: bolder;
  18.         /* 简写 */
  19.         font:italic lighter 12px sans-serif;
  20.     }
  21.     body{
  22.         /* background-color:背景颜色 */
  23.         /* background-color: wheat; */
  24.         /* background-image:背景图片 */
  25.         /* background-image: url('666.png'); */
  26.         /* background-repeat:平铺 no-repeat不平铺*/
  27.         /* background-repeat: no-repeat; */
  28.         /* background-size: 背景图片的尺寸 */
  29.         /* background-size: 100px; */
  30.         /* background-position:背景图片的位置 */
  31.         /* background-position: 200px 200px; */
  32.         /* background-position:right;  */
  33.         /* 简写 */
  34.         background: url('666.png') no-repeat 200px 200px ;
  35.     }
  36.     /* 字体图标 */
  37.     .iconfont{
  38.         font-size: 50px;
  39.         color: tomato;
  40.     }
  41.     </style>
  42. </head>
  43. <body>
  44.     <h3 class="h3">属性的简写</h3>
  45.     <span class="iconfont icon-zhuye"></span>
  46. </body>
  47. </html>

五.实例盒模型常用属性与缩写方案

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>盒模型的属性与缩写</title>
  6.     <style>
  7.         .box {
  8.             height: 200px;
  9.             width: 200px;
  10.             background-color: skyblue;
  11.             box-sizing: border-box;
  12.         }
  13.         /* 边框 */
  14.         .box {
  15.             border-top: 5px red solid;
  16.             border-bottom: teal 5px solid;
  17.             /* 缩写 */
  18.             border: 5px black solid;
  19.         }
  20.         /* 内边距 */
  21.         .box {
  22.             /* 内边距：上右下左，按顺时针排序 */
  23.             padding: 5px 6px 8px 10px;
  24.             background-clip: content-box;
  25.             /* 三值 */
  26.             padding: 10px 20px 15px;
  27.             /* 二值 */
  28.             padding: 10px 20px;
  29.             /* 单值 */
  30.             padding: 30px;
  31.             /* 结论：当使用三值和二值时，只需要记住第二个永远表示左右就可以了 */
  32.         }
  33.         /* 外边距 */
  34.         .box {
  35.             /* 控制多个盒子之间的排列间距 */
  36.             /* 四值，按顺时针，上右下左 */
  37.             margin: 10px 5px 6px 7px;
  38.             /* 三值 */
  39.             margin: 5px 6px 7px;
  40.             /* 二值 */
  41.             margin: 8px 7px;
  42.             /* 单值:四个方向全相等 */
  43.             margin: 20px;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="box"></div>
  49. </body>
  50. </html>

演示截图：

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