博主信息
豌豆君
博文
22
粉丝
0
评论
0
访问量
5882
积分:0
P豆:46

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

2020年12月26日 23:05:14阅读数:249博客 / 豌豆君/ 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. /* 链接四种状态:顺序是固定的(如先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. }
  12. h2 {
  13. color: green;
  14. } */
  15. /* --------------------------------------------- */
  16. /* 2.当选择器不同时,与优先级相关,级别高的覆盖级别低 */
  17. /* .on {
  18. color: violet;
  19. } */
  20. /* h2 无效果,表示clas的优先级大于 tag标签 */
  21. /* h2 {
  22. color: green;
  23. } */
  24. /* 如果仍想提升选择器的优先级,此时到了class级,我们应该用id级 */
  25. #foo {
  26. color: blue;
  27. }
  28. /* .on无效,因为级别低了 */
  29. .on {
  30. color: violet;
  31. }
  32. /* 结论:id > class > tag */
  33. /* !important: 不是选择器 是提权关键字 */
  34. </style>
  35. </head>
  36. <body>
  37. <h2 class="on" id="foo"> hello php.cn</h2>
  38. </body>
  39. </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] */
  39. /* 如果想把body h2继续提权,选择一个只要比 body h2 权重高的选择器组合就可以了 */
  40. /* [0,0,3] */
  41. /* html body h2 {
  42. color: skyblue;
  43. } */
  44. /* [0,0,2] */
  45. /* body h2 {
  46. color: red;
  47. } */
  48. /* -------------------------------- */
  49. /* [0,0,3] */
  50. /* 因为html是根元素,上面没有人 */
  51. /* [0,1,0] */
  52. /* .on {
  53. color: skyblue;
  54. } */
  55. /* [0,0,3] */
  56. /* html body h2 {
  57. color: red;
  58. } */
  59. /* [0,1,1] */
  60. /* h2.on {
  61. color: skyblue;
  62. } */
  63. /* [0,1,0] */
  64. /* .on {
  65. color: red;
  66. } */
  67. /* [0,1,1] */
  68. /* h2.on {
  69. color: skyblue;
  70. } */
  71. /* [0,1,2] */
  72. /* body h2.on {
  73. color: red;
  74. } */
  75. /* [0,1,3] */
  76. /* html body h2.on {
  77. color: skyblue;
  78. } */
  79. /* [0,2,0] */
  80. .on.off {
  81. color: red;
  82. }
  83. /* [1,2,0] */
  84. .on.off#foo {
  85. color: skyblue;
  86. }
  87. /* [1,2,1] */
  88. h2.on.off#foo {
  89. color: green;
  90. }
  91. /* 注意提权公式是ice(或ict),而选择器的写法是eci(或tci)刚好相反 */
  92. </style>
  93. </head>
  94. <body>
  95. <h2 class="on off" id="foo"> hello php.cn</h2>
  96. </body>
  97. </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; */
  13. /* font简写 */
  14. font: italic lighter 36px sans-serif;
  15. }
  16. /* 生成的 @font-face */
  17. @font-face {
  18. font-family: 'iconfont';
  19. src: url('./icon-font/iconfont.eot');
  20. src: url('./icon-font/iconfont.eot?#iefix') format('embedded-opentype'),
  21. url('./icon-font/iconfont.woff2') format('woff2'),
  22. url('./icon-font/iconfont.woff') format('woff'),
  23. url('./icon-font/iconfont.ttf') format('truetype'),
  24. url('./icon-font/iconfont.svg#iconfont') format('svg');
  25. }
  26. /* 定义使用 iconfont 的样式 */
  27. span.iconfont {
  28. font-family: "iconfont" !important;
  29. font-size: 38px;
  30. font-style: normal;
  31. -webkit-font-smoothing: antialiased;
  32. -moz-osx-font-smoothing: grayscale;
  33. }
  34. /* 定义使用 iconfont icon-addpeople_fill的样式 */
  35. span.iconfont.icon-addpeople_fill {
  36. font-size: 100px;
  37. color: violet;
  38. }
  39. body {
  40. /* background-color: cornsilk;
  41. background-image: url(https://www.php.cn/static/images/index_yunv.jpg);
  42. background-repeat: no-repeat;
  43. background-size: 300px; */
  44. /* background-position: 0 0;
  45. background-position: 100px 200px;
  46. background-position: top; */
  47. /* background-position: top center; */
  48. /* 简写 */
  49. background: url(https://www.php.cn/static/images/index_yunv.jpg) no-repeat top center;
  50. }
  51. </style>
  52. <link rel="stylesheet" href="./icon-font/iconfont.css">
  53. </head>
  54. <body>
  55. <h2 class="title">php中文网</h2>
  56. <span class="iconfont icon-addpeople_fill"></span>
  57. <br>
  58. <span class="iconfont">&#xe70b;</span>
  59. </body>
  60. </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; */
  20. /* border-top: 5px green solid;
  21. border-bottom: 10px red solid;
  22. border-left: solid 15px blue;
  23. border-right: indigo solid 20px; */
  24. /* 简写 */
  25. border: 5px solid olive;
  26. }
  27. .box {
  28. /* 内边距 */
  29. /* padding: 上 右 下 左;按顺时针方向 */
  30. padding: 5px 10px 15px 20px;
  31. /* 页面看不到是因为padding是透明的,且背景色会自动扩展到padding */
  32. /* 将背景色裁剪到内容区 */
  33. background-clip: content-box;
  34. /* 当左右相等,而上下不相等,使用三值语法 */
  35. padding: 5px 20px 10px;
  36. /* 当左右相等,上下也相等,使用二值语法 */
  37. padding: 5px 20px;
  38. /* 如果四个方向全相等,使用单值语法 */
  39. padding: 20px;
  40. }
  41. .box {
  42. /* 外边距:控制多个盒子之间的排列间距 */
  43. /* 四值,顺时针,上右下左 */
  44. margin: 5px 10px 15px 20px;
  45. /* 三值,左右相等,上下不等 */
  46. margin: 5px 10px 15px;
  47. /* 二值,左右相等,上下也相等 */
  48. margin: 5px 10px;
  49. /* 单值,四个方向全相等 */
  50. margin: 5px;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div class="box"></div>
  56. </body>
  57. </html>

总结:

伪类选择器:状态匹配

  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:控制多个盒子之间的排列间距
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 所谓CSS,即是指CSS样在浏览中被解析后顺序;浏览是通过来判断哪些值与元素最相关以决定并应用到该元素上
    css重指是csscss样会覆盖css样越高说明重越高,反之亦然。