search

博客列表 >伪类选择器的状态匹配，选择器的优先级和提权方式，属性的简写

伪类选择器的状态匹配，选择器的优先级和提权方式，属性的简写

豌豆君
豌豆君原创
2020年12月26日 23:05:14894浏览

伪类选择器：状态匹配

  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：控制多个盒子之间的排列间距
上一条：grid项目对齐属性|实例演示-组件布局-媒体查询下一条：项目在网格单元中和容器中的对齐方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多