博客列表 >css 选择器基础知识

css 选择器基础知识

Yang_Sir
Yang_Sir原创
2020年04月07日 18:09:28963浏览

css 基础,选择器

1. 简单选择器

  • 简单选择器的种类
序号 选择器 描述 举例
1 元素选择器 根据元素标签名称进行匹配 div {...}
2 群组选择器 同时选择多个不同类型的元素 h1,h2,h3{...}
3 通配选择器 选择全部元素,不区分类型 * {...}
4 属性选择器 根据元素属性进行匹配 *[...]
5 类选择器 根据元素 class 属性进行匹配 *.active {...}
6 id 选择器 根据元素 id 属性进行匹配 *#top {...}

1.1 元素选择器示例

  • 根据元素标签名称进行匹配,列:
  1. <head>
  2. <style>
  3. body {
  4. background-color: rgb(200, 202, 180);
  5. }
  6. h3 {
  7. color: crimson;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <div class="title">
  13. <h2>标题2</h2>
  14. <h3>标题3</h3>
  15. <h4>标题4</h4>
  16. </div>
  17. </body>

效果图

1.2 群组选择器示例

  • 同时选择多个不同类型的元素
  1. <style>
  2. h2,
  3. h4 {
  4. color: darkturquoise;
  5. }
  6. </style>
  7. <body>
  8. <div class="title">
  9. <h2>标题2</h2>
  10. <h4>标题4</h4>
  11. </div>
  12. </body>

效果图

1.3 通配选择器示例

  • 选择全部元素,不区分类型
  1. <style>
  2. * {
  3. border-style: solid;
  4. border-color: rgb(245, 236, 213);
  5. }
  6. </style>
  7. <body>
  8. <div class="title">
  9. <h2>标题2</h2>
  10. <h2>标题3</h2>
  11. <h4>标题4</h4>
  12. </div>
  13. </body>

效果图

1.4 属性选择器示例

  • 根据元素属性进行匹配
  1. <style>
  2. .container {
  3. display: grid;
  4. width: 200px;
  5. height: 200px;
  6. grid-template-columns: repeat(4, 1fr);
  7. gap: 5px;
  8. }
  9. .item {
  10. background-color: cornflowerblue;
  11. display: flex;
  12. align-items: center;
  13. justify-content: center;
  14. }
  15. div[name="second"] {
  16. background-color: rgb(255, 255, 255);
  17. }
  18. </style>
  19. <body>
  20. <div class="container">
  21. <div class="item" id="first">1</div>
  22. <div class="item" name="second">2</div>
  23. <div class="item">3</div>
  24. <div class="item">4</div>
  25. <div class="item five">5</div>
  26. <div class="item">6</div>
  27. <div class="item">7</div>
  28. <div class="item">8</div>
  29. <div class="item">9</div>
  30. <div class="item">10</div>
  31. <div class="item">11</div>
  32. <div class="item">12</div>
  33. <div class="item">13</div>
  34. <div class="item">14</div>
  35. <div class="item">15</div>
  36. <div class="item">16</div>
  37. </div>
  38. </body>

效果图

1.5 类选择器示例

  • 根据元素 class 属性进行匹配
  1. <style>
  2. .container {
  3. display: grid;
  4. width: 200px;
  5. height: 200px;
  6. grid-template-columns: repeat(4, 1fr);
  7. gap: 5px;
  8. }
  9. .item {
  10. background-color: cornflowerblue;
  11. display: flex;
  12. align-items: center;
  13. justify-content: center;
  14. }
  15. </style>
  16. <body>
  17. <div class="container">
  18. <div class="item" id="first">1</div>
  19. <div class="item" name="second">2</div>
  20. <div class="item">3</div>
  21. <div class="item">4</div>
  22. <div class="item five">5</div>
  23. <div class="item">6</div>
  24. <div class="item">7</div>
  25. <div class="item">8</div>
  26. <div class="item">9</div>
  27. <div class="item">10</div>
  28. <div class="item">11</div>
  29. <div class="item">12</div>
  30. <div class="item">13</div>
  31. <div class="item">14</div>
  32. <div class="item">15</div>
  33. <div class="item">16</div>
  34. </div>
  35. </body>

效果图

1.6 id 选择器示例

  • 根据元素 id 属性进行匹配
  1. <style>
  2. .container {
  3. display: grid;
  4. width: 200px;
  5. height: 200px;
  6. grid-template-columns: repeat(4, 1fr);
  7. gap: 5px;
  8. }
  9. .item {
  10. background-color: cornflowerblue;
  11. display: flex;
  12. align-items: center;
  13. justify-content: center;
  14. }
  15. #first {
  16. color: #ffff00;
  17. }
  18. </style>
  19. <body>
  20. <div class="container">
  21. <div class="item" id="first">1</div>
  22. <div class="item" name="second">2</div>
  23. <div class="item">3</div>
  24. <div class="item">4</div>
  25. <div class="item five">5</div>
  26. <div class="item">6</div>
  27. <div class="item">7</div>
  28. <div class="item">8</div>
  29. <div class="item">9</div>
  30. <div class="item">10</div>
  31. <div class="item">11</div>
  32. <div class="item">12</div>
  33. <div class="item">13</div>
  34. <div class="item">14</div>
  35. <div class="item">15</div>
  36. <div class="item">16</div>
  37. </div>
  38. </body>

效果图

2. 上下文选择器

  • html 文档有层级机构,每个元素都有自己的相对位置,即上下文关系
  • 所以,我们可以根据元素的相对位置来获取它

2.1 元素的四种角色

序号 角色 描述
1 祖先元素 拥有子元素,孙元素等所有层级的后代元素
2 父级元素 仅拥有子元素层级的元素
3 后代元素 与其它层级元素一起拥有共同祖先元素
4 子元素 与其它同级元素一起拥有共同父级元素

2.2 四种上下文选择器

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

2.3 后代选择器示例

  1. <style>
  2. div label {
  3. color: darkmagenta;
  4. }
  5. </style>
  6. <body>
  7. <div class="login">
  8. <form action="">
  9. <label>请登录</label>
  10. <section>
  11. <label for="username">账&nbsp;&nbsp;&nbsp;&nbsp;号:</label
  12. ><input type="text" id="username" />
  13. </section>
  14. <section>
  15. <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label
  16. ><input type="password" id="password" />
  17. </section>
  18. <section>
  19. <label for="verify">验证码:</label
  20. ><input
  21. type="text"
  22. id="verify"
  23. disabled
  24. placeholder="从大到小点击黄色单元格"
  25. />
  26. </section>
  27. <section>
  28. <button>登录</button>
  29. <button type="reset">重置</button>
  30. </section>
  31. </form>
  32. </div>
  33. </body>

效果图

2.4 父子选择器示例

  1. <style>
  2. form > label {
  3. font-size: 1.5rem;
  4. color: darkolivegreen;
  5. }
  6. </style>
  7. <body>
  8. <div class="login">
  9. <form action="">
  10. <label>请登录</label>
  11. <section>
  12. <label for="username">账&nbsp;&nbsp;&nbsp;&nbsp;号:</label
  13. ><input type="text" id="username" />
  14. </section>
  15. <section>
  16. <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label
  17. ><input type="password" id="password" />
  18. </section>
  19. <section>
  20. <label for="verify">验证码:</label
  21. ><input
  22. type="text"
  23. id="verify"
  24. disabled
  25. placeholder="从大到小点击黄色单元格"
  26. />
  27. </section>
  28. <section>
  29. <button>登录</button>
  30. <button type="reset">重置</button>
  31. </section>
  32. </form>
  33. </div>
  34. </body>

效果图

2.5 同级相邻选择器示例

  1. <style>
  2. /*类选择器*/
  3. .container {
  4. display: grid;
  5. width: 200px;
  6. height: 200px;
  7. grid-template-columns: repeat(4, 1fr);
  8. gap: 5px;
  9. }
  10. .item {
  11. background-color: cornflowerblue;
  12. display: flex;
  13. align-items: center;
  14. justify-content: center;
  15. }
  16. /* 同级相邻选择器 ,相邻的后一个*/
  17. .item.five + div {
  18. background-color: #80ff00;
  19. }
  20. </style>
  21. <body>
  22. <div class="login">
  23. <div class="container">
  24. <div class="item" id="first">1</div>
  25. <div class="item" name="second">2</div>
  26. <div class="item">3</div>
  27. <div class="item">4</div>
  28. <div class="item five">5</div>
  29. <div class="item">6</div>
  30. <div class="item">7</div>
  31. <div class="item">8</div>
  32. <div class="item">9</div>
  33. <div class="item">10</div>
  34. <div class="item">11</div>
  35. <div class="item">12</div>
  36. <div class="item">13</div>
  37. <div class="item">14</div>
  38. <div class="item">15</div>
  39. <div class="item">16</div>
  40. </div>
  41. </div>
  42. </body>

效果图

2.6 同级所有选择器示例

  1. <style>
  2. /*类选择器*/
  3. .container {
  4. display: grid;
  5. width: 200px;
  6. height: 200px;
  7. grid-template-columns: repeat(4, 1fr);
  8. gap: 5px;
  9. }
  10. .item {
  11. background-color: cornflowerblue;
  12. display: flex;
  13. align-items: center;
  14. justify-content: center;
  15. }
  16. /* 同级相邻选择器 ,相邻的后一个*/
  17. .item.five ~ div {
  18. background-color: firebrick;
  19. }
  20. </style>
  21. <body>
  22. <div class="login">
  23. <div class="container">
  24. <div class="item" id="first">1</div>
  25. <div class="item" name="second">2</div>
  26. <div class="item">3</div>
  27. <div class="item">4</div>
  28. <div class="item five">5</div>
  29. <div class="item">6</div>
  30. <div class="item">7</div>
  31. <div class="item">8</div>
  32. <div class="item">9</div>
  33. <div class="item">10</div>
  34. <div class="item">11</div>
  35. <div class="item">12</div>
  36. <div class="item">13</div>
  37. <div class="item">14</div>
  38. <div class="item">15</div>
  39. <div class="item">16</div>
  40. </div>
  41. </div>
  42. </body>

效果图

3. 伪类选择器

  • 伪类选择器可以弥补上下文选择器的局限性
  • 伪类大多数基于文档的元素结构
  • 伪类的重要应用场景
场景 描述
结构伪类 根据子元素的位置特征进行选择
表单伪类 根据表单控件状态特征进行选择

3.1 结构伪类

3.1.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. <style>
  2. /*类选择器*/
  3. .container {
  4. display: grid;
  5. width: 200px;
  6. height: 200px;
  7. grid-template-columns: repeat(4, 1fr);
  8. gap: 5px;
  9. }
  10. .item {
  11. background-color: cornflowerblue;
  12. display: flex;
  13. align-items: center;
  14. justify-content: center;
  15. }
  16. /*匹配第一个子元素*/
  17. .container > :first-child {
  18. background-color: #80ff00;
  19. }
  20. /*匹配最后一个子元素 */
  21. .container > :last-child {
  22. background-color: #00ff00;
  23. }
  24. /*匹配唯一的子元素,只有一个子元素时 */
  25. .only > :only-child {
  26. background-color: #400040;
  27. }
  28. /*匹配任意位置的子元素 */
  29. .container > :nth-child(10) {
  30. background-color: #ff0080;
  31. }
  32. /*匹配任意位置的子元素 */
  33. .container > :nth-last-child(10) {
  34. background-color: #0080ff;
  35. }
  36. </style>
  37. <body>
  38. <div class="container">
  39. <div class="item">1</div>
  40. <div class="item">2</div>
  41. <div class="item">3</div>
  42. <div class="item">4</div>
  43. <div class="item">5</div>
  44. <div class="item">6</div>
  45. <div class="item">7</div>
  46. <div class="item">8</div>
  47. <div class="item">9</div>
  48. <div class="item">10</div>
  49. <div class="item">11</div>
  50. <div class="item">12</div>
  51. <div class="item">13</div>
  52. <div class="item">14</div>
  53. <div class="item">15</div>
  54. <div class="item">16</div>
  55. </div>
  56. <div class="only">
  57. <h4>标题4</h4>
  58. </div>
  59. </body>

效果图

3.1.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. <style>
  2. /* 为了防止递归,应该在具体的父元素上调用伪类 */
  3. /*匹配分组第一个子元素 */
  4. .container div:first-of-type {
  5. background-color: rgb(179, 238, 130);
  6. }
  7. .container span:first-of-type {
  8. background-color: rgb(179, 238, 130);
  9. }
  10. /*匹配分组最后一个子元素 */
  11. .container div:last-of-type {
  12. background-color: rgb(33, 26, 94);
  13. }
  14. .container span:last-of-type {
  15. background-color: rgb(33, 26, 94);
  16. }
  17. /*匹配分组前四个子元素 后边的样式覆盖了前边的 */
  18. .container span:nth-of-type(-n + 4) {
  19. background-color: rgb(94, 39, 39);
  20. }
  21. /*匹配分组倒数第三个元素 */
  22. .container DIV:nth-last-of-type(3) {
  23. background-color: rgb(185, 221, 25);
  24. }
  25. .container span:nth-last-of-type(3) {
  26. background-color: rgb(185, 221, 25);
  27. }
  28. </style>
  29. <body>
  30. <div class="container">
  31. <div class="item">1</div>
  32. <div class="item">2</div>
  33. <div class="item">3</div>
  34. <div class="item">4</div>
  35. <div class="item">5</div>
  36. <div class="item">6</div>
  37. <div class="item">7</div>
  38. <div class="item">8</div>
  39. <span class="item">9</span>
  40. <span class="item">10</span>
  41. <span class="item">11</span>
  42. <span class="item">12</span>
  43. <span class="item">13</span>
  44. <span class="item">14</span>
  45. <span class="item">15</span>
  46. <span class="item">16</span>
  47. </div>
  48. </body>

效果图

3.2 其它伪类

序号 选择器 描述
1 :active 向被激活的元素添加样式
2 :focus 向拥有键盘输入焦点的元素添加样式
3 :hover 当鼠标悬浮在元素上方时,向元素添加样式
4 :link 向未被访问的链接添加样式
5 :visited 向已被访问的链接添加样式
5 :root 根元素,通常是html
5 :empty 选择没有任何子元素的元素(含文本节点)
5 :not() 排除与选择器参数匹配的元素

示例:

  1. <style>
  2. /* 向未被访问的链接添加样式 */
  3. a:link {
  4. background-color: rgb(190, 181, 224);
  5. }
  6. /* 向已被访问的链接添加样式 */
  7. a:visited {
  8. background-color: rgb(213, 240, 63);
  9. }
  10. /* 当鼠标悬浮在元素上方时,向元素添加样式 */
  11. a:hover {
  12. background-color: blue;
  13. }
  14. /* 向被激活的元素添加样式 */
  15. a:active {
  16. background-color: rgb(126, 17, 17);
  17. }
  18. /* 根元素,通常是`html` */
  19. *:root {
  20. background-color: #ffff80;
  21. }
  22. /* 向拥有键盘输入焦点的元素添加样式 */
  23. input:focus {
  24. background-color: #0080c0;
  25. }
  26. /* 选择没有任何子元素的元素(含文本节点) ,示例中的input元素 */
  27. *:empty {
  28. background-color: rgb(139, 209, 26);
  29. }
  30. </style>
  31. <body>
  32. <div class="only">
  33. <h4>标题4</h4>
  34. </div>
  35. <ul>
  36. <li><a href="">导航1</a></li>
  37. <li><a href="">导航2</a></li>
  38. <li><a href="">导航3</a></li>
  39. <li><a href="">导航4</a></li>
  40. </ul>
  41. <div class="login">
  42. <form action="">
  43. <label>请登录</label>
  44. <section>
  45. <label for="username">账&nbsp;&nbsp;&nbsp;&nbsp;号:</label
  46. ><input type="text" id="username" />
  47. </section>
  48. <section>
  49. <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label
  50. ><input type="password" id="password" />
  51. </section>
  52. <section>
  53. <label for="verify">验证码:</label
  54. ><input
  55. type="text"
  56. id="verify"
  57. disabled
  58. placeholder="从大到小点击黄色单元格"
  59. />
  60. </section>
  61. <section>
  62. <button>登录</button>
  63. <button type="reset">重置</button>
  64. </section>
  65. </form>
  66. </div>
  67. </body>

效果图

4. 表单伪类

  • 根据表单控件的属性匹配表单元素
  • 表单伪类示例
  1. <style>
  2. /* disabled属性匹配元素 */
  3. input:disabled {
  4. color: #ffff80;
  5. background-color: #ffff80;
  6. }
  7. /*根据 required属性匹配元素 */
  8. input:required {
  9. color: blue;
  10. }
  11. /* 匹配有输入焦点的元素 */
  12. form *:focus {
  13. background-color: lightgreen;
  14. }
  15. </style>
  16. <body>
  17. <div class="login">
  18. <form action="">
  19. <label>请登录</label>
  20. <section>
  21. <label for="username">账&nbsp;&nbsp;&nbsp;&nbsp;号:</label
  22. ><input type="text" id="username" required />
  23. </section>
  24. <section>
  25. <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label
  26. ><input type="password" id="password" required />
  27. </section>
  28. <section>
  29. <label for="verify">验证码:</label
  30. ><input
  31. type="text"
  32. id="verify"
  33. disabled
  34. placeholder="从大到小点击黄色单元格"
  35. />
  36. </section>
  37. <section>
  38. <button>登录</button>
  39. <button type="reset">重置</button>
  40. </section>
  41. </form>
  42. </div>
  43. </div>
  44. </body>

效果图

5. 课程总结

  • css 选择器是通过元素的各种特征来匹配对应的元素,为其添加样式。如:属性、类、标签名、状态、位置等。
  • 多个选择器有时会发生重叠,后边的样式会覆盖前边的样式。
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议