博客列表 >4.6前端入门之CSS选择器

4.6前端入门之CSS选择器

zero
zero原创
2020年04月20日 01:24:09824浏览

CSS选择器

1.简单选择器与ID选择器,类选择器

序号 选择器 描述 举例
1 元素选择器 根据元素标签名称进行匹配 div {...}
2 群组选择器 同时选择多个不同类型的元素 h1,h2,h3{...}
3 通配选择器 选择全部元素,不区分类型 * {...}
4 属性选择器 根据元素属性进行匹配 *[...]
5 类选择器 根据元素 class 属性进行匹配 *.active {...}
6 id 选择器 根据元素 id 属性进行匹配 *#top {...}
  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. <title>简单选择器</title>
  7. </head>
  8. <style>
  9. .container {
  10. width: 300px;
  11. height: 300px;
  12. display: grid;
  13. grid-template-columns: repeat(3, 1fr);
  14. gap: 5px;
  15. }
  16. .item {
  17. font-size: 2rem;
  18. background-color: lightblue;
  19. color: white;
  20. display: flex;
  21. justify-content: center;
  22. align-items: center;
  23. }
  24. #first {
  25. background-color: slateblue;
  26. }
  27. .item[title="hello"] {
  28. background-color: red;
  29. }
  30. .item[title="php"] {
  31. background-color: sienna;
  32. }
  33. </style>
  34. <body>
  35. <div class="container">
  36. <div class="item" id="first">1</div>
  37. <div class="item">2</div>
  38. <div class="item" title="hello">3</div>
  39. <div class="item">4</div>
  40. <div class="item" title="php">5</div>
  41. <div class="item">6</div>
  42. <div class="item">7</div>
  43. <div class="item">8</div>
  44. <div class="item">9</div>
  45. </div>
  46. </body>
  47. </html>

效果图

2.上下文选择器

序号 选择器 操作符 描述 举例
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li
  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. <title>上下文选择器</title>
  7. </head>
  8. <style>
  9. .container {
  10. width: 300px;
  11. height: 300px;
  12. display: grid;
  13. grid-template-columns: repeat(3, 1fr);
  14. gap: 5px;
  15. }
  16. .item {
  17. font-size: 2rem;
  18. background-color: lightskyblue;
  19. display: flex;
  20. justify-content: center;
  21. align-items: center;
  22. }
  23. .container div {
  24. border: 2px solid brown;
  25. }
  26. body > div {
  27. border: 2px solid red;
  28. }
  29. .item.center ~ .item {
  30. background-color: yellow;
  31. }
  32. </style>
  33. <body>
  34. <div class="container">
  35. <div class="item" id="first">1</div>
  36. <div class="item">2</div>
  37. <div class="item" title="hello">3</div>
  38. <div class="item center">4</div>
  39. <div class="item" title="php">5</div>
  40. <div class="item">6</div>
  41. <div class="item">7</div>
  42. <div class="item">8</div>
  43. <div class="item">9</div>
  44. </div>
  45. </body>
  46. </html>

效果图

3.伪类选择器

3.1 伪类不分组

序号 选择器 描述 举例
1 :first-child 匹配第一个子元素 div :first-child
2 :last-child 匹配最后一个子元素 div :last-child
3 :only-child 选择元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :nth-last-child(n) 匹配倒数任意位置的子元素 div :nth-last-child(n)
  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. <title>伪类选择器:不分组</title>
  7. <style>
  8. .container {
  9. width: 300px;
  10. height: 300px;
  11. display: grid;
  12. grid-template-columns: repeat(3, 1fr);
  13. gap: 5px;
  14. }
  15. .item {
  16. font-size: 2rem;
  17. background-color: lightskyblue;
  18. display: flex;
  19. justify-content: center;
  20. align-items: center;
  21. }
  22. * .container :first-child {
  23. background-color: red;
  24. }
  25. .container :nth-child(3) {
  26. background-color: salmon;
  27. }
  28. .container :last-child {
  29. background-color: lightgreen;
  30. }
  31. .container :nth-child(even) {
  32. background-color: lime;
  33. }
  34. .container :nth-last-child(3) {
  35. background-color: mediumblue;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="container">
  41. <div class="item first">1</div>
  42. <div class="item">2</div>
  43. <div class="item">3</div>
  44. <div class="item">4</div>
  45. <div class="item center">5</div>
  46. <div class="item">6</div>
  47. <div class="item">7</div>
  48. <div class="item">8</div>
  49. <div class="item">9</div>
  50. </div>
  51. </body>
  52. </html>

效果图

3.2伪类分组

序号 选择器 描述 举例
1 :first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
2 :last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
3 :only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
5 :nth-last-of-type() 匹配按类型分组后倒数任意位置的子元素 div :nth-last-of-type(n)
  • 允许使用表达式来匹配一组元素,表达式中的”n”是从”0”开始计数,且必须写到前面
  • “-n”表示获取前面一组元素,正数表示从指定位置获取余下元素
  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. <title>伪类选择器分组</title>
  7. <style>
  8. .container {
  9. width: 300px;
  10. height: 300px;
  11. display: grid;
  12. grid-template-columns: repeat(3, 1fr);
  13. gap: 5px;
  14. }
  15. .item {
  16. font-size: 2rem;
  17. background-color: lightskyblue;
  18. display: flex;
  19. justify-content: center;
  20. align-items: center;
  21. }
  22. .container span:first-of-type {
  23. background-color: blueviolet;
  24. }
  25. .container div:first-of-type {
  26. background-color: brown;
  27. }
  28. .container span:nth-last-of-type(3) {
  29. background-color: chocolate;
  30. }
  31. .container div:nth-last-of-type(2) {
  32. background-color: darkcyan;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class="container">
  38. <div class="item first">1</div>
  39. <div class="item">2</div>
  40. <div class="item">3</div>
  41. <div class="item">4</div>
  42. <span class="item center">5</span>
  43. <span class="item">6</span>
  44. <span class="item">7</span>
  45. <span class="item">8</span>
  46. <span class="item">9</span>
  47. </div>
  48. </body>
  49. </html>

效果图

3.2表单伪类

序号 选择器 描述
1 :active 向被激活的元素添加样式
2 :focus 向拥有键盘输入焦点的元素添加样式
3 :hover 当鼠标悬浮在元素上方时,向元素添加样式
4 :link 向未被访问的链接添加样式
5 :visited 向已被访问的链接添加样式
5 :root 根元素,通常是html
5 :empty 选择没有任何子元素的元素(含文本节点)
5 :not() 排除与选择器参数匹配的元素
  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. <title>Document</title>
  7. </head>
  8. <style>
  9. :root {
  10. background-color: darkkhaki;
  11. }
  12. input:required {
  13. background-color: white;
  14. }
  15. input:disabled {
  16. background-color: lightslategray;
  17. color: red;
  18. }
  19. input:hover {
  20. background-color: slateblue;
  21. }
  22. </style>
  23. <body>
  24. <form action="" id="register"></form>
  25. <!-- 第一个表单分组 -->
  26. <fieldset name="base" form="register">
  27. <legend>基本信息</legend>
  28. <section>
  29. <input
  30. type="email"
  31. name="email"
  32. placeholder="您的邮箱"
  33. form="register"
  34. required
  35. autofocus
  36. />
  37. <input
  38. type="password"
  39. name="psw1"
  40. placeholder="您的密码"
  41. form="register"
  42. required
  43. />
  44. <input
  45. type="password"
  46. name="psw2"
  47. placeholder="重复密码"
  48. form="register"
  49. />
  50. </section>
  51. </fieldset>
  52. <fieldset name="base" form="register">
  53. <legend>选填信息</legend>
  54. <section>
  55. <input
  56. type="text"
  57. name="nicheng"
  58. placeholder="您的昵称"
  59. form="register"
  60. autofocus
  61. />
  62. <input
  63. type="number"
  64. name="nianling"
  65. placeholder="您的年龄"
  66. form="register"
  67. />
  68. <input
  69. type="text"
  70. name="gexing"
  71. placeholder="个性签名"
  72. form="register"
  73. />
  74. <input
  75. type="text"
  76. name="tishi"
  77. placeholder="提示:XXXXXXX"
  78. form="register"
  79. disabled
  80. />
  81. </section>
  82. </fieldset>
  83. <button
  84. type="submit"
  85. form="register"
  86. formenctype="register.php"
  87. formmethod="POST"
  88. formtarget="_blank"
  89. >
  90. 提交
  91. </button>
  92. </body>
  93. </html>

效果图

4.总结

4.1 简单选择器

  • 最常用的是: 元素选择器, 类选择器, id 选择器
  • 当 class,id 选择器不限定被修改的元素类型时, 星号”*“可以省略

4.2 上下文选择器

序号 选择器 操作符 描述 举例
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li

4.3 伪类选择器

4.3.1 伪类选择器-不分组匹配

场景 描述
结构伪类 根据子元素的位置特征进行选择
表单伪类 根据表单控件状态特征进行选择
序号 选择器 描述 举例
1 :first-child 匹配第一个子元素 div :first-child
2 :last-child 匹配最后一个子元素 div :last-child
3 :only-child 选择元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :nth-last-child(n) 匹配倒数任意位置的子元素 div :nth-last-child(n)

4.3.2 伪类选择器-分组匹配

序号 选择器 描述 举例
1 :first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
2 :last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
3 :only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
5 :nth-last-of-type() 匹配按类型分组后倒数任意位置的子元素 div :nth-last-of-type(n)

4.3.3 表单伪类

序号 选择器 描述
1 :active 向被激活的元素添加样式
2 :focus 向拥有键盘输入焦点的元素添加样式
3 :hover 当鼠标悬浮在元素上方时,向元素添加样式
4 :link 向未被访问的链接添加样式
5 :visited 向已被访问的链接添加样式
5 :root 根元素,通常是html
5 :empty 选择没有任何子元素的元素(含文本节点)
5 :not() 排除与选择器参数匹配的元素
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议