Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > css-20201215（css02）选择器详解
Blogger Information
Blog 29
fans 0
comment 0
visits 18505
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css-20201215（css02）选择器详解
CC
Original
568 people have browsed it

选择器

01 标签选择器h1,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>Document</title>
  7.     <style>
  8.         li {
  9.             color: brown;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <ul>
  15.         <li>item1</li>
  16.         <li>item1</li>
  17.         <li>item1</li>
  18.         <li>item1</li>
  19.         <li>item1</li>
  20.     </ul>
  21. </body>
  22. </html>

02类选择器

  • 类选择器，使用class（简化.）
  • 标签选择器 返回的是一组数据
  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.     <style>
  8.         li.on{background-color: cornflowerblue;
  10.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <ul>
  16.         <li>item1</li>
  17.         <li class="on">item1</li>
  18.         <li>item1</li>
  19.         <li class="on">item1</li>
  20.         <li>item1</li>
  21.     </ul>
  22. </body>
  23. </html>

id选择器

  • id选择器，使用class（简化#）

  • 标签选择器 返回的是一个数据

    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.   <style>
    8.       .on {background-color: cornflowerblue;
    10.       }
    11.       #off {background-color: darkgoldenrod;
    13.       }
    15.   </style>
    16. </head>
    17. <body>
    18.   <ul>
    19.       <li id= "off">item1</li>
    20.       <li class="on">item1</li>
    21.       <li>item1</li>
    22.       <li class="on">item1</li>
    23.       <li id = "off">item1</li>
    24.   </ul>
    25. </body>
    26. </html>

上下文选择器

  • 由大到小选择。后代选择器
  • 01选择所有标签渲染
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         ul li {
  10.             background-color:darkgoldenrod
  11.         }
  12.     </style>
  13. </head>
  15. <body>
  16.     <ul>
  17.         <li id="off">item1</li>
  18.         <li class="on">item1</li>
  19.         <li>item1</li>
  20.         <ul>
  21.             <li>item1-2</li>
  22.             <li>item1-2</li>
  23.         </ul>
  24.         <li class="on">item1</li>
  25.         <li id="off">item1</li>
  26.     </ul>
  27. </body>
  29. </html>
  • 02父子级别的发生渲染
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.        body> ul> li {
  10.            background-color: darkgreen;
  11.        }
  12.     </style>
  13. </head>
  15. <body>
  16.     <ul>
  17.         <li id="off">item1</li>
  18.         <li class="on">item1</li>
  19.         <li>item1</li>
  20.         <ul>
  21.             <li>item1-2</li>
  22.             <li>item1-2</li>
  23.         </ul>
  24.         <li class="on">item1</li>
  25.         <li id="off">item1</li>
  26.     </ul>
  27. </body>
  29. </html>

同级选择器

04 伪类选择器(重点)
nth-of-type与last-of-type

  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.     <link rel="stylesheet" href="css01.css">
  9. </head>
  10. <body>
  11.     <ul>
  12.         <li>itme1</li>
  13.         <li>itme2</li>
  14.         <li>itme3</li>
  15.         <li>itme4</li>
  16.         <li>itme5</li>
  17.         <li>itme6</li>
  18.         <li>itme7</li>
  19.         <li>itme8</li>
  20.         <li>itme9</li>
  21.         <li>itme10</li>
  22.     </ul>
  23. </body>
  24. </html>
  25. `

-匹配任意位置的元素写法一

  1. /* 写法一匹配第三个li */
  2.  ul li:nth-of-type(0n+3){
  3.      background-color: rgb(228, 127, 164);
  4.  }

写法二

  1.  ul li:nth-of-type(3){
  2.      background-color: rgb(228, 127, 164);
  3.  }

  • 匹配所有元素

    2. ul li:nth-of-type(1n){
    3.    background-color: rgb(228, 127, 164);
    4. }
  • 匹配倒数第三个
    1. ul li:nth-last-of-type(3){
    2.    background-color: rgb(228, 127, 164);
    3. }
  • 匹配从第三个开始
    1. ul li:nth-of-type(n+3){
    2.    background-color: rgb(228, 127, 164);
    3. }
  • 匹配倒数
    1. ul li:nth-last-of-type(-n+3){
    2.    background-color: rgb(228, 127, 164);
    3. }
  • 匹配偶数 (even)
  2.  ul li:nth-of-type(2n){
  3.     background-color: rgb(228, 127, 164);
  4. }

匹配奇数(odd)

  1.  ul li:nth-of-type(2n-1){
  2.     background-color: rgb(228, 127, 164);
  3. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post