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

css学习之伪类选择器

程序员文章站 2022-04-05 12:50:52
...

css学习之伪类选择器

知识点

  1. 效果图
    css学习之伪类选择器
  2. 代码如下
      

    1. <!DOCTYPE html>
      2. 

    2. <html lang="en">
      3. 

    3. <head>
      4. 

    4.  <meta charset="UTF-8" />
      5. 

    5.  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. 

    6.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. 

    7.  <title>选择器：伪类</title>
      8. 

    8.  <link rel="stylesheet" href="" />
      9. 

    9.  /* 总结一下 1. 获取指定的某一个: (b) 2, 获取前几个, (-n+b) 3.
      10. 

    10.  获取指定位置后的全部元素, (n+b) 4. 获取全部偶数(2n/even)或奇数(2n+1/odd)元素
      11. 

    11.  */
      12. 

    12.  <style>
      13. 

    13.    li {
      14. 

    14.      border: 1px solid;
      15. 

    15.    }
      16. 

    16.    /* :nth-of-type()分组匹配，在匹配前将元素分类后再匹配
      17. 

    17.    没有 >  这个符号会递归选择*/
      18. 

    18.    /* 1.选择第1个 */
      19. 

    19.    .list > :nth-of-type(1) {
      20. 

    20.      background-color: red;
      21. 

    21.    }
      22. 

    22.    /* 用first-of-type实现第一个 */
      23. 

    23.    .list > :first-of-type {
      24. 

    24.      background-color: red;
      25. 

    25.    }
      26. 

    26.    /* 2.选择第二个 */
      27. 

    27.    .list > :nth-of-type(2) {
      28. 

    28.      background-color: green;
      29. 

    29.    }
      30. 

    30.    /* 3.选择最后一个 */
      31. 

    31.    .list > :last-of-type {
      32. 

    32.      background-color: yellow;
      33. 

    33.    }
      34. 

    34.    /* 4.用last-of-type实现选择倒数第二个 */
      35. 

    35.    .list > :nth-last-of-type(2) {
      36. 

    36.      background-color: black;
      37. 

    37.    }
      38. 

    38.    /* 5.选择器数值的属性结构
      39. 

    39.    nth-of-type(参数)
      40. 

    40.    an+b a为系数;n为计数器 从0开始;b是偏移量 也是从0开始;元素的有效编号: 必须从1开始 */
      41. 

    41.    /* 从第四行 1n+4==>n+4*/
      42. 

    42.    .list-small > :nth-of-type(1n + 4) {
      43. 

    43.      background-color: cyan;
      44. 

    44.    }
      45. 

    45.    /* 选择前三行 */
      46. 

    46.    .list-small > :nth-of-type(-n + 3) {
      47. 

    47.      background-color: orange;
      48. 

    48.    }
      49. 

    49.    /* 选择后三行 */
      50. 

    50.    .list-small > :nth-last-of-type(-n + 3) {
      51. 

    51.      background-color: blue;
      52. 

    52.    }
      53. 

    53.    /* 选择偶数行 2n或者even */
      54. 

    54.    .list-small > :nth-of-type(even) {
      55. 

    55.      background-color: lightgreen;
      56. 

    56.    }
      57. 

    57.    /* 选择偶数行 2n+1或者odd */
      58. 

    58.    .list-small > :nth-of-type(odd) {
      59. 

    59.      background-color: rgb(211, 144, 238);
      60. 

    60.    }
      61. 

    61.  </style>
      62. 

    62. </head>
      63. 

    63. <body>
      64. 

    64.  <!-- 伪类：类是class -->
      65. 

    65.  <ul class="list">
      66. 

    66.    <li>item1</li>
      67. 

    67.    <li>item2</li>
      68. 

    68.    <li>
      69. 

    69.      item3
      70. 

    70.      <ul class="list-small">
      71. 

    71.        <li>bb1</li>
      72. 

    72.        <li>bb2</li>
      73. 

    73.        <li>bb3</li>
      74. 

    74.        <li>bb4</li>
      75. 

    75.        <li>bb5</li>
      76. 

    76.        <li>bb6</li>
      77. 

    77.        <li>bb7</li>
      78. 

    78.        <li>bb8</li>
      79. 

    79.        <li>bb9</li>
      80. 

    80.        <li>bb10</li>
      81. 

    81.      </ul>
      82. 

    82.    </li>
      83. 

    83.    <li>item4</li>
      84. 

    84.    <li>item5</li>
      85. 

    85.    <li>item6</li>
      86. 

    86.    <li>item7</li>
      87. 

    87.    <li>item8</li>
      88. 

    88.  </ul>
      89. 

    89. </body>
      90. 

    90. </html>
      91.

上一篇： 分享一个HTML5电子杂志翻书特效代码

下一篇： 【jQuery】如何获去select被选中option的value和text值

推荐阅读