Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 伪类选择器的状态匹配，选择器的优先级和提权方式，属性的简写
Blogger Information
Blog 22
fans 0
comment 0
visits 21200
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
893 people have browsed it

伪类选择器：状态匹配

  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.         /* 链接四种状态：顺序是固定的(如先link->visited->hover->active顺序不能乱) */
  9.         /* 1. 默认，没有访问（没有点击） */
  10.         a:link {
  11.             color: blue;
  12.             /* 下划线去掉 */
  13.             text-decoration: none;
  14.         }
  15.         /* 2.已访问过的状态 */
  16.         a:visited{
  17.             color: violet;
  18.         }
  19.         /* 3.悬停状 */
  20.         a:hover {
  21.             color: red;
  22.         }
  23.         /* 4.激活，当鼠标点击压下去的时候 */
  24.         a:active {
  25.             color: green;
  26.         }
  27.         /* ------------------------------------------- */
  28.         /* 第一个p第一个input */
  29.         /* form p:first-of-type input:first-of-type{
  30.             background-color: yellow;
  31.         } */
  32.         input:read-only {
  33.             background-color: yellow;
  34.         }
  35.         input[type=email] {
  36.             background-color: red;
  37.         }
  38.         input:required {
  39.             background-color: violet;
  40.         }
  41.         input:disabled {
  42.             background-color: yellowgreen;
  43.         }
  44.         input:focus {
  45.             background-color: green;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <!-- 1.链接 -->
  51.     <a href="https://www.php.cn">php中文网</a>
  52.     <!-- 2.表单 -->
  53.     <!-- autofocus 第一个能应用到焦点 其它不行 -->
  54.     <form action="">
  55.         <p>用户名：<input type="text" name="" value="admin" readonly autofocus></p>
  56.         <p>邮箱：<input type="email" name="" value="" required autofocus></p>
  57.         <p>密码：<input type="password" name="" value="12345678" disabled></p>
  58.         <p><button>提交</button></p>
  59.     </form>
  60. </body>
  61. </html>

选择器的优先级

  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.         /* 1.当选择器相同时，与书写顺序有关，后面的样式覆盖前面的 */
  9.         /* h2 {
  10.             color: gold;
  11.         }
  13.         h2 {
  14.             color: green;
  15.         } */
  17.         /* --------------------------------------------- */
  18.         /* 2.当选择器不同时，与优先级相关，级别高的覆盖级别低 */
  19.         /* .on {
  20.             color: violet;
  21.         } */
  22.         /* h2 无效果，表示clas的优先级大于 tag标签 */
  23.         /* h2 {
  24.             color: green;
  25.         } */
  26.         /* 如果仍想提升选择器的优先级，此时到了class级，我们应该用id级 */
  27.         #foo {
  28.             color: blue;
  29.         }
  30.         /* .on无效，因为级别低了 */
  31.         .on {
  32.             color: violet;
  33.         }
  34.         /* 结论：id > class > tag */
  35.         /* !important: 不是选择器 是提权关键字 */
  36.     </style>
  37. </head>
  38. <body>
  39.     <h2 class="on" id="foo"> hello php.cn</h2>
  40. </body>
  41. </html>

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

  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.         /* 1.声明顺序对优先级的影响 */
  9.         /* h2 {
  10.             color: skyblue;
  11.         } */
  12.         /* 在后面有一个相同的声明，根据源码的顺序，后面有效 */
  13.         /* h2 {
  14.             color: red;
  15.         } */
  16.         /* 2. 选择器的类型对优先级的影响 */
  17.         /* .on {
  18.             color: skyblue;
  19.         }
  20.         h2 {
  21.             color: red;
  22.         } */
  23.         /* 是不是只能用选择器类型的提权来提升优先级？ */
  24.         /* 实际工作中，应该用一系列的选择器组合来灵活的设置优先级 */
  25.         /* ----------------------------------------------------------- */
  26.         /* body h2 {
  27.             color: skyblue;
  28.         }
  29.         h2 {
  30.             color: red;
  31.         } */
  32.         /* 大家都是标签级，为什么写到后面的无效，一定有一个规则 */
  33.         /* id > class > tag */
  34.         /* 有一个计算公式：[id选择器的数量，class选择器的数量，tag选择器的数量] */
  35.         /* body h2: [id=0,class=0,tag=2] */
  36.         /* h2: [id=0,class=0,tag=1] */
  37.         /* tag级向class级进位（class比tag高位），class级向id级进位（id比class高位） */
  38.         /* .on h2: [id=0,class=1,tag=1] 得 [0,1,1] */
  40.         /* 如果想把body h2继续提权，选择一个只要比 body h2 权重高的选择器组合就可以了 */
  41.         /* [0,0,3] */
  42.         /* html body h2 {
  43.             color: skyblue;
  44.         } */
  45.         /* [0,0,2] */
  46.         /* body h2 {
  47.             color: red;
  48.         } */
  49.         /* -------------------------------- */
  50.         /* [0,0,3] */
  51.         /* 因为html是根元素，上面没有人 */
  52.         /* [0,1,0] */
  53.         /* .on {
  54.             color: skyblue;
  55.         } */
  56.         /* [0,0,3] */
  57.         /* html body h2 {
  58.             color: red;
  59.         } */
  60.         /* [0,1,1] */
  61.         /* h2.on {
  62.             color: skyblue;
  63.         } */
  64.         /* [0,1,0] */
  65.         /* .on {
  66.             color: red;
  67.         } */
  68.         /* [0,1,1] */
  69.         /* h2.on {
  70.             color: skyblue;
  71.         } */
  72.         /* [0,1,2] */
  73.         /* body h2.on {
  74.             color: red;
  75.         } */
  76.         /* [0,1,3] */
  77.         /* html body h2.on {
  78.             color: skyblue;
  79.         } */
  80.         /* [0,2,0] */
  81.         .on.off {
  82.             color: red;
  83.         }
  84.         /* [1,2,0] */
  85.         .on.off#foo {
  86.             color: skyblue;
  87.         }
  88.         /* [1,2,1] */
  89.         h2.on.off#foo {
  90.             color: green;
  91.         }
  92.         /* 注意提权公式是ice（或ict）,而选择器的写法是eci（或tci）刚好相反 */
  93.     </style>
  94. </head>
  95. <body>
  96.     <h2 class="on off" id="foo"> hello php.cn</h2>
  97. </body>
  98. </html>

属性的简写和iconfont

  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>属性的简写和iconfont</title>
  7.     <style>
  8.         .title {
  9.             /* font-family: sans-serif;
  10.             font-size: 24px;
  11.             font-style: initial;
  12.             font-weight: lighter; */
  14.             /* font简写 */
  15.             font: italic lighter 36px sans-serif;
  16.         }
  18.         /* 生成的 @font-face */
  19.         @font-face {
  20.         font-family: 'iconfont';
  21.         src: url('./icon-font/iconfont.eot');
  22.         src: url('./icon-font/iconfont.eot?#iefix') format('embedded-opentype'),
  23.             url('./icon-font/iconfont.woff2') format('woff2'),
  24.             url('./icon-font/iconfont.woff') format('woff'),
  25.             url('./icon-font/iconfont.ttf') format('truetype'),
  26.             url('./icon-font/iconfont.svg#iconfont') format('svg');
  27.         }
  29.         /* 定义使用 iconfont 的样式 */
  30.         span.iconfont {
  31.         font-family: "iconfont" !important;
  32.         font-size: 38px;
  33.         font-style: normal;
  34.         -webkit-font-smoothing: antialiased;
  35.         -moz-osx-font-smoothing: grayscale;
  36.         }
  37.         /* 定义使用 iconfont icon-addpeople_fill的样式 */
  38.         span.iconfont.icon-addpeople_fill {
  39.         font-size: 100px;
  40.         color: violet;
  41.         }
  42.         body {
  43.             /* background-color: cornsilk;
  44.             background-image: url(https://www.php.cn/static/images/index_yunv.jpg);
  45.             background-repeat: no-repeat;
  46.             background-size: 300px; */
  47.             /* background-position: 0 0;
  48.             background-position: 100px 200px;
  49.             background-position: top; */
  50.             /* background-position: top center; */
  52.             /* 简写 */
  53.             background: url(https://www.php.cn/static/images/index_yunv.jpg) no-repeat top center;
  54.         }
  55.     </style>
  56.     <link rel="stylesheet" href="./icon-font/iconfont.css">
  57. </head>
  58. <body>
  59.     <h2 class="title">php中文网</h2>
  60.     <span class="iconfont icon-addpeople_fill"></span>
  61.     <br>
  62.     <span class="iconfont">&#xe70b;</span>
  63. </body>
  64. </html>

盒模型的属性和缩写

  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.         .box {
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: violet;
  12.             box-sizing: border-box;
  13.         }
  14.         .box {
  15.             /* 边框 */
  16.             /* 每个边框可以设置三个属性：宽度，样式，颜色 */
  17.             /* border-top-width: 5px;
  18.             border-top-color: red;
  19.             border-top-style: solid; */
  21.             /* border-top: 5px green solid;
  22.             border-bottom: 10px red solid;
  23.             border-left: solid 15px blue;
  24.             border-right: indigo solid 20px; */
  26.             /* 简写 */
  27.             border: 5px solid olive;
  28.         }
  29.         .box {
  30.             /* 内边距 */
  31.             /* padding: 上 右 下 左；按顺时针方向 */
  32.             padding: 5px 10px 15px 20px;
  33.             /* 页面看不到是因为padding是透明的，且背景色会自动扩展到padding */
  35.             /* 将背景色裁剪到内容区 */
  36.             background-clip: content-box;
  38.             /* 当左右相等，而上下不相等，使用三值语法 */
  39.             padding: 5px 20px 10px;
  40.             /* 当左右相等，上下也相等，使用二值语法 */
  41.             padding: 5px 20px;
  42.             /* 如果四个方向全相等，使用单值语法 */
  43.             padding: 20px;
  44.         }
  46.         .box {
  47.             /* 外边距：控制多个盒子之间的排列间距 */
  48.             /* 四值，顺时针，上右下左 */
  49.             margin: 5px 10px 15px 20px;
  50.             /* 三值，左右相等，上下不等 */
  51.             margin: 5px 10px 15px;
  52.             /* 二值，左右相等，上下也相等 */
  53.             margin: 5px 10px;
  54.             /* 单值，四个方向全相等 */
  55.             margin: 5px;
  56.         }
  57.     </style>
  58. </head>
  59. <body>
  60.     <div class="box"></div>
  61. </body>
  62. </html>

总结：

伪类选择器：状态匹配

链接四种状态：顺序是固定的(如先link->visited->hover->active顺序不能乱)

  1. link 默认，没有访问（没有点击）
  2. visited 已访问过的状态
  3. hover 悬停状
  4. active 激活，当鼠标点击压下去的时候

其它状态： read-only， required， disabled，focus

  • autofocus 第一个能应用到焦点 其它不行

选择器的优先级

  1. 当选择器相同时，与书写顺序有关，后面的样式覆盖前面的
  2. 当选择器不同时，与优先级相关，级别高的覆盖级别低
  3. 结论：id > class > tag （!important: 不是选择器 是提权关键字 ）

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

  1. 声明顺序对优先级的影响
  2. 选择器的类型对优先级的影响
  3. 提权计算公式：[id选择器的数量，class选择器的数量，tag选择器的数量]
  4. 注意提权公式是ice（或ict）,而选择器的写法是eci（或tci）刚好相反

iconfont

  • 编码引用：@font-face {}生成 再使用
  • 类引用：link导入css 再用class=”iconfont icon-addpeople_fill”使用

属性的简写

  • background 背景；图片，排列，位置
  • border 边框；宽度，样式，颜色
  • 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