欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS选择器之简单选择器、上下文选择器、伪类选择器小结

程序员文章站 2022-03-14 12:14:31
...

选择器

一. 简单选择器

1.1 种类

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

示例代码

    

  1.   <title>简单选择器</title>
    2. 

  2.     <style>
    3. 

  3.       /*元素选择器*/
    4. 

  4.       p {
    5. 

  5.         color: blue;
    6. 

  6.       }
    7. 

  7.       /*属性选择器*/
    8. 

  8.       p[class="p2"] {
    9. 

  9.         color: red;
    10. 

  10.       }
    11. 

  11.       /*类/class选择器*/
    12. 

  12.       .p3 {
    13. 

  13.         color: green;
    14. 

  14.       }
    15. 

  15.       /*ID选择器*/
    16. 

  16.       #p1 {
    17. 

  17.         color: black;
    18. 

  18.       }
    19. 

  19.       /*群组选择器*/
    20. 

  20.       p,
    21. 

  21.       h2 {
    22. 

  22.         background-color: lightblue;
    23. 

  23.       }
    24. 

  24.       /*通配符选择器*/
    25. 

  25.       * {
    26. 

  26.         font-size: 1rem;
    27. 

  27.       }
    28. 

  28.     </style>
    29. 

  29.   </head>
    30. 

  30.   <body>
    31. 

  31.     <p class="p1" id="p1">p1文字1</p>
    32. 

  32.     <p class="p2">p2文字2</p>
    33. 

  33.     <p class="p3">p3文字</p>
    34. 

  34.     <h2>h2文字</h2>
    35. 

  35.   </body>
    36.

效果

CSS选择器之简单选择器、上下文选择器、伪类选择器小结

二. 上下文选择器

2.1 一个元素的四种角色

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

2.2 四种上下文选择器

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

示例代码

    

  1.  <title>上下文选择器</title>
    2. 

  2.     <style>
    3. 

  3.       /*后代选择器*/
    4. 

  4.       section h2 {
    5. 

  5.         color: green;
    6. 

  6.       }
    7. 

  7.       /*父子选择器*/
    8. 

  8.       section > h2 {
    9. 

  9.         color: red;
    10. 

  10.       }
    11. 

  11.       /*同级相邻选择器*/
    12. 

  12.       #item + h2 {
    13. 

  13.         background-color: yellow;
    14. 

  14.       }
    15. 

  15.       /*同级所有选择器*/
    16. 

  16.       #item ~ h2 {
    17. 

  17.         color: pink;
    18. 

  18.       }
    19. 

  19.     </style>
    20. 

  20.   </head>
    21. 

  21.   <body>
    22. 

  22.     <section>
    23. 

  23.       <div>
    24. 

  24.         <h2 id="item">h2文字1</h2>
    25. 

  25.         <h2>h2文字2</h2>
    26. 

  26.         <h2>h2文字3</h2>
    27. 

  27.       </div>
    28. 

  28.       <h2>h2文字4</h2>
    29. 

  29.       <h2>h2文字5</h2>
    30. 

  30.     </section>
    31. 

  31.   </body>
    32.

效果

CSS选择器之简单选择器、上下文选择器、伪类选择器小结

三. 伪类选择器

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)

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”表示获取前面一组元素,正数表示从指定位置获取余下元素

3.3 其它伪类

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

“不分组匹配”示例代码

    

  1. <title>结构伪类: 不分组匹配</title>
    2. 

  2.     <style>
    3. 

  3.       .container {
    4. 

  4.         width: 300px;
    5. 

  5.         height: 300px;
    6. 

  6.         display: grid;
    7. 

  7.         grid-template-columns: repeat(3, 1fr);
    8. 

  8.         gap: 5px;
    9. 

  9.       }
    10. 

  10.       /* 类选择器 */
    11. 

  11.       .item {
    12. 

  12.         font-size: 2rem;
    13. 

  13.         background-color: lightskyblue;
    14. 

  14.         display: flex;
    15. 

  15.         justify-content: center;
    16. 

  16.         align-items: center;
    17. 

  17.       }
    18. 

  18.       /* body , 第一个单元格都 变了 */
    19. 

  19.       /* 为了防止递归,应该在具体的父元素上调用伪类 */
    20. 

  20.       /* :nth-child(1) === :first-child */
    21. 

  21.       .container > :first-child {
    22. 

  22.         /* background-color: wheat; */
    23. 

  23.       }
    24. 

  24.       /* 匹配最后一个 */
    25. 

  25.       .container > :last-child {
    26. 

  26.         /* background-color: lightpink; */
    27. 

  27.       }
    28. 

  28.       /* 匹配任何一个 */
    29. 

  29.       /* 索引是从1开始计算 */
    30. 

  30.       .container > :nth-child(3) {
    31. 

  31.         /* background-color: lightgreen; */
    32. 

  32.       }
    33. 

  33.       /* :nth-child(n)　n: 支持表达式 */
    34. 

  34.       /* 当n在表达式中的时, 从0开始 */
    35. 

  35.       .container > :nth-child(2n) {
    36. 

  36.         /* background-color: magenta; */
    37. 

  37.       }
    38. 

  38.       /* even: 代表偶数 */
    39. 

  39.       .container > :nth-child(even) {
    40. 

  40.         /* background-color: magenta; */
    41. 

  41.       }
    42. 

  42.       /* 选择奇数 */
    43. 

  43.       .container > :nth-child(2n-1) {
    44. 

  44.         /* background-color: lightsalmon; */
    45. 

  45.       }
    46. 

  46.       /* odd: 代表奇数 */
    47. 

  47.       .container > :nth-child(odd) {
    48. 

  48.         /* background-color: lightsalmon; */
    49. 

  49.       }
    50. 

  50.       /* 只选择前三个 */
    51. 

  51.       /* n: 0开始 */
    52. 

  52.       /* -0 + 3 = 3
    53. 

  53.       -1 +3 = 2
    54. 

  54.       -2 +3 = 1 */
    55. 

  55.       .container > :nth-child(-n + 3) {
    56. 

  56.         /* background-color: lightgreen; */
    57. 

  57.       }
    58. 

  58.       /* 选择倒数第2个 */
    59. 

  59.       .container :nth-last-child(2) {
    60. 

  60.         /* background-color: lime; */
    61. 

  61.       }
    62. 

  62.       /* 从第4个开始,选择剩下的所有元素 */
    63. 

  63.       .container > :nth-child(n + 4) {
    64. 

  64.         background-color: lightgrey;
    65. 

  65.       }
    66. 

  66.     </style>
    67. 

  67.   </head>
    68. 

  68.   <body>
    69. 

  69.     <div class="container">
    70. 

  70.       <div class="item">1</div>
    71. 

  71.       <div class="item">2</div>
    72. 

  72.       <div class="item">3</div>
    73. 

  73.       <div class="item">4</div>
    74. 

  74.       <div class="item">5</div>
    75. 

  75.       <div class="item">6</div>
    76. 

  76.       <div class="item">7</div>
    77. 

  77.       <div class="item">8</div>
    78. 

  78.       <div class="item">9</div>
    79. 

  79.     </div>
    80. 

  80.   </body>
    81.

“分组匹配”示例代码

    

  1. <title>结构伪类: 分组匹配</title>
    2. 

  2.     <style>
    3. 

  3.       .container {
    4. 

  4.         width: 300px;
    5. 

  5.         height: 300px;
    6. 

  6.         display: grid;
    7. 

  7.         grid-template-columns: repeat(3, 1fr);
    8. 

  8.         gap: 5px;
    9. 

  9.       }
    10. 

  10.       /* 类选择器 */
    11. 

  11.       .item {
    12. 

  12.         font-size: 2rem;
    13. 

  13.         background-color: lightskyblue;
    14. 

  14.         display: flex;
    15. 

  15.         justify-content: center;
    16. 

  16.         align-items: center;
    17. 

  17.       }
    18. 

  18.       .container span:first-of-type {
    19. 

  19.         background-color: violet;
    20. 

  20.       }
    21. 

  21.       .container span:last-of-type {
    22. 

  22.         background-color: violet;
    23. 

  23.       }
    24. 

  24.       /* span分组前三个 */
    25. 

  25.       .container span:nth-of-type(-n + 3) {
    26. 

  26.         background-color: grey;
    27. 

  27.       }
    28. 

  28.       .container span:nth-last-of-type(-n + 2) {
    29. 

  29.         background-color: coral;
    30. 

  30.       }
    31. 

  31.     </style>
    32. 

  32.   </head>
    33. 

  33.   <body>
    34. 

  34.     <div class="container">
    35. 

  35.       <div class="item">1</div>
    36. 

  36.       <div class="item">2</div>
    37. 

  37.       <div class="item">3</div>
    38. 

  38.       <div class="item">4</div>
    39. 

  39.       <!-- 分为二组 -->
    40. 

  40.       <span class="item">5</span>
    41. 

  41.       <span class="item">6</span>
    42. 

  42.       <span class="item">7</span>
    43. 

  43.       <span class="item">8</span>
    44. 

  44.       <span class="item">9</span>
    45. 

  45.     </div>
    46. 

  46.   </body>
    47.

“其他伪类”示例

1.:link 向未被访问的链接添加样式

    

  1. <head>
    2. 

  2.    <style>
    3. 

  3.    a:link
    4. 

  4.    {
    5. 

  5.     background-color:yellow;
    6. 

  6.     }
    7. 

  7.    </style>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10.    <a href="http://www.google.com">Google</a>
    11. 

  11.    /*:link 选择器为未被访问过的链接设置样式。*/
    12. 

  12. </body>
    13.

2.:focus向拥有键盘输入焦点的元素添加样式

    

  1.  <head>
    2. 

  2.     <style>
    3. 

  3.       input:focus {
    4. 

  4.         background-color: yellow;
    5. 

  5.       }
    6. 

  6.     </style>
    7. 

  7.   </head>
    8. 

  8.   <body>
    9. 

  9.     <form>
    10. 

  10.       First name: <input type="text" name="firstname" /><br />
    11. 

  11.       Last name: <input type="text" name="lastname" />
    12. 

  12.     </form>
    13. 

  13.   </body>
    14.

3.:hover当鼠标悬浮在元素上方时，向元素添加样式

    

  1.  <head>
    2. 

  2.     <style>
    3. 

  3.       a:hover {
    4. 

  4.         background-color: yellow;
    5. 

  5.       }
    6. 

  6.     </style>
    7. 

  7.   </head>
    8. 

  8.   <body>
    9. 

  9.     <a href="http://www.google.com">Google</a>
    10. 

  10.     <p><b>注释：</b>:hover 选择器鼠标指针在其上浮动的链接设置样式。</p>
    11. 

  11.   </body>
    12.

四.总结

1.通过今天的学习，了解到要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。选择器就是根据不同需求把不同的标签选出来，然后针对性性的进行样式设定，可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式表也会变得简洁明了。
2.比如标签选择器可以直接作用于多个标签(中间以逗号隔开进行选择器分组),标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 “共性” 而不是 ”特性“。

上一篇： 数据库设计的基本原则是什么

下一篇： PHP中常用函数的漏洞有哪些？

推荐阅读