Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS选择器的用法和含义
Blogger Information
Blog 11
fans 0
comment 0
visits 13403
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选择器的用法和含义
Blueprint
Original
1657 people have browsed it

天下难事，必作于易；天下大事，必作于细

选择器的作用

CSS选择器可用于实现对HTML网页上的元素样式的一对一，一对多或者多对一的控制。

选择器分类（个人理解）

css中的选择器分为以下几类：

1.基本选择器

通过元素的通用属性class、ID和标签本身选择

2.上下文选择器

借助元素之间的关系父子、同胞选择

3.结构伪类选择器

根据文档结构

4.伪类

选择那些不能够被普通选择器选择的文档之外的元素，
例如a标签的hover、actice和visited等

5.伪元素

同伪类一样选择那些不能够被普通选择器选择的文档之外的元素
更像是创建一个不存在在文档结构的元素

伪类前使用:
伪元素使用::

简单选择器

选择器 用法 含义
通用选择器 *{} 选择所有的元素
标签选择器 [p/i/em/b/strong·····]{} 选择同标签名的元素
类选择器 .className{} 选择类名为className的元素
ID选择器 #idName{} 选择ID名为idName的元素

就用grid布局实现的的九宫格可以更容易理解选择器的用法

原型样式：

  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>
  8.     <style>
  9.       /* 使用九宫格来演示: grid布局实现 */
  10.       .box1 {
  11.         margin:0;
  12.         padding:0;
  13.         width: 300px;
  14.         height: 300px;
  15.         display: grid;
  16.         grid-template-columns: repeat(3, 1fr);
  17.         gap: 5px;
  18.         border: 2px solid #000;
  19.       }
  20.       .sbox {
  21.         font-size: 2rem;
  22.         /* background-color: lightskyblue; */
  23.         display: flex;
  24.         justify-content: center;
  25.         align-items: center;
  26.         border: 2px solid black;
  27.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <ul class="box1">
  33.       <li class="sbox">1</li>
  34.       <li class="sbox">2</li>
  35.       <li class="sbox">3</li>
  36.       <li class="sbox">4</li>
  37.       <li class="sbox">5</li>
  38.       <li class="sbox">6</li>
  39.       <li class="sbox">7</li>
  40.       <li class="sbox">8</li>
  41.       <li class="sbox">9</li>
  42.     </ul>
  43.   </body>
  44. </html>

通用选择器：
  1.     <style>
  2.       /* 使用九宫格来演示: grid布局实现 */
  3.       .box1 {
  4.         margin: 0;
  5.         padding: 0;
  6.         width: 300px;
  7.         height: 300px;
  8.         display: grid;
  9.         grid-template-columns: repeat(3, 1fr);
  10.         gap: 5px;
  11.         border: 2px solid #000;
  12.       }
  13.       .sbox {
  14.         font-size: 2rem;
  15.         /* background-color: lightskyblue; */
  16.         display: flex;
  17.         justify-content: center;
  18.         align-items: center;
  19.         border: 2px solid black;
  20.       }
  22.       * {
  23.         background-color: #ccc;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <ul class="box1">
  29.       <li class="sbox">1</li>
  30.       <li class="sbox">2</li>
  31.       <li class="sbox">3</li>
  32.       <li class="sbox">4</li>
  33.       <li class="sbox">5</li>
  34.       <li class="sbox">6</li>
  35.       <li class="sbox">7</li>
  36.       <li class="sbox">8</li>
  37.       <li class="sbox">9</li>
  38.     </ul>
  39.   </body>

标签选择器

  2.     <style>
  3.       /* 使用九宫格来演示: grid布局实现 */
  4.       .box1 {
  5.         margin: 0;
  6.         padding: 0;
  7.         width: 300px;
  8.         height: 300px;
  9.         display: grid;
  10.         grid-template-columns: repeat(3, 1fr);
  11.         gap: 5px;
  12.         border: 2px solid #000;
  13.       }
  14.       .sbox {
  15.         font-size: 2rem;
  16.         /* background-color: lightskyblue; */
  17.         display: flex;
  18.         justify-content: center;
  19.         align-items: center;
  20.         border: 2px solid black;
  21.       }
  23.       li {
  24.         background-color: red;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <ul class="box1">
  30.       <li class="sbox">1</li>
  31.       <li class="sbox">2</li>
  32.       <li class="sbox">3</li>
  33.       <li class="sbox">4</li>
  34.       <li class="sbox">5</li>
  35.       <li class="sbox">6</li>
  36.       <li class="sbox">7</li>
  37.       <li class="sbox">8</li>
  38.       <li class="sbox">9</li>
  39.     </ul>
  40.   </body>

类选择器

  3.     <style>
  4.       /* 使用九宫格来演示: grid布局实现 */
  5.       .box1 {
  6.         margin: 0;
  7.         padding: 0;
  8.         width: 300px;
  9.         height: 300px;
  10.         display: grid;
  11.         grid-template-columns: repeat(3, 1fr);
  12.         gap: 5px;
  13.         border: 2px solid #000;
  14.       }
  15.       .sbox {
  16.         font-size: 2rem;
  17.         /* background-color: lightskyblue; */
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.         border: 2px solid black;
  22.       }
  24.       /* 类选择器 */
  25.       .sbox {
  26.         background-color: #333;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <ul class="box1">
  32.       <li class="sbox">1</li>
  33.       <li class="sbox">2</li>
  34.       <li class="sbox">3</li>
  35.       <li class="sbox">4</li>
  36.       <li class="sbox">5</li>
  37.       <li class="sbox">6</li>
  38.       <li class="sbox">7</li>
  39.       <li class="sbox">8</li>
  40.       <li class="sbox">9</li>
  41.     </ul>
  42.   </body>

id选择器

  3.     <style>
  4.       /* 使用九宫格来演示: grid布局实现 */
  5.       .box1 {
  6.         margin: 0;
  7.         padding: 0;
  8.         width: 300px;
  9.         height: 300px;
  10.         display: grid;
  11.         grid-template-columns: repeat(3, 1fr);
  12.         gap: 5px;
  13.         border: 2px solid #000;
  14.       }
  15.       .sbox {
  16.         font-size: 2rem;
  17.         /* background-color: lightskyblue; */
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.         border: 2px solid black;
  22.       }
  25.       /* id 选择器*/
  26.       #sbox {
  27.         background-color: #333;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <ul class="box1">
  33.       <li class="sbox" id="sbox">1</li>
  34.       <li class="sbox">2</li>
  35.       <li class="sbox">3</li>
  36.       <li class="sbox">4</li>
  37.       <li class="sbox">5</li>
  38.       <li class="sbox">6</li>
  39.       <li class="sbox">7</li>
  40.       <li class="sbox">8</li>
  41.       <li class="sbox">9</li>
  42.     </ul>
  43.   </body>
  44. </html>

上下文选择器

选择器 用法 含义
父代选择器 body ul{} 选择body元素中的所有ul元素（父代选择器选择范围下级链表）
父子选择器 body > ul{} 选择body元素中的ul元素（只针对子元素）
兄弟选择器 .box + .box{} 选择同级元素的下一个

父代选择器

  1.     <style>
  2.       /* 使用九宫格来演示: grid布局实现 */
  3.       .box1 {
  4.         margin: 0;
  5.         padding: 0;
  6.         width: 300px;
  7.         height: 300px;
  8.         display: grid;
  9.         grid-template-columns: repeat(3, 1fr);
  10.         gap: 5px;
  11.         border: 2px solid #000;
  12.       }
  13.       .sbox {
  14.         font-size: 2rem;
  15.         /* background-color: lightskyblue; */
  16.         display: flex;
  17.         justify-content: center;
  18.         align-items: center;
  19.         border: 2px solid black;
  20.       }
  22.       /* 父代选择器 */
  23.       body ul li {
  24.         background-color: #333;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <ul class="box1">
  30.       <li class="sbox" id="sbox">1</li>
  31.       <li class="sbox">2</li>
  32.       <li class="sbox">3</li>
  33.       <li class="sbox">4</li>
  34.       <li class="sbox">5</li>
  35.       <li class="sbox">6</li>
  36.       <li class="sbox">7</li>
  37.       <li class="sbox">8</li>
  38.       <li class="sbox">9</li>
  39.     </ul>
  40.   </body>

父子选择器

  1.     <style>
  2.       /* 使用九宫格来演示: grid布局实现 */
  3.       .box1 {
  4.         margin: 0;
  5.         padding: 0;
  6.         width: 300px;
  7.         height: 300px;
  8.         display: grid;
  9.         grid-template-columns: repeat(3, 1fr);
  10.         gap: 5px;
  11.         border: 2px solid #000;
  12.       }
  13.       .sbox {
  14.         font-size: 2rem;
  15.         /* background-color: lightskyblue; */
  16.         display: flex;
  17.         justify-content: center;
  18.         align-items: center;
  19.         border: 2px solid black;
  20.       }
  23.       /* 父子选择器 */
  24.       ul > li.center {
  25.         background-color: #ccc;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <ul class="box1">
  31.       <li class="sbox" id="sbox">1</li>
  32.       <li class="sbox">2</li>
  33.       <li class="sbox">3</li>
  34.       <li class="sbox">4</li>
  35.       <li class="sbox center">5</li>
  36.       <li class="sbox">6</li>
  37.       <li class="sbox">7</li>
  38.       <li class="sbox">8</li>
  39.       <li class="sbox">9</li>
  40.     </ul>
  41.   </body>

兄弟选择器

  1.     <style>
  2.       /* 使用九宫格来演示: grid布局实现 */
  3.       .box1 {
  4.         margin: 0;
  5.         padding: 0;
  6.         width: 300px;
  7.         height: 300px;
  8.         display: grid;
  9.         grid-template-columns: repeat(3, 1fr);
  10.         gap: 5px;
  11.         border: 2px solid #000;
  12.       }
  13.       .sbox {
  14.         font-size: 2rem;
  15.         /* background-color: lightskyblue; */
  16.         display: flex;
  17.         justify-content: center;
  18.         align-items: center;
  19.         border: 2px solid black;
  20.       }
  22.       /* 兄弟选择器 */
  23.       .center + .sbox {
  24.         background-color: #ccc;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <ul class="box1">
  30.       <li class="sbox" id="sbox">1</li>
  31.       <li class="sbox">2</li>
  32.       <li class="sbox">3</li>
  33.       <li class="sbox">4</li>
  34.       <li class="sbox center">5</li>
  35.       <li class="sbox">6</li>
  36.       <li class="sbox">7</li>
  37.       <li class="sbox">8</li>
  38.       <li class="sbox">9</li>
  39.     </ul>
  40.   </body>
  41. </html>

结构伪类选择器

  1. 不分组
  2.     :first-child
  3.     :last-child
  4.     :nth-child(n)
  5.     :nth-last-child(n)
  6. 分组
  7.     :first-of-type
  8.     :last-of-type

:first-child

  • 选择子代第一个元素
  2.     <style>
  3.       /* 使用九宫格来演示: grid布局实现 */
  4.       .box1 {
  5.         margin: 0;
  6.         padding: 0;
  7.         width: 300px;
  8.         height: 300px;
  9.         display: grid;
  10.         grid-template-columns: repeat(3, 1fr);
  11.         gap: 5px;
  12.         border: 2px solid #000;
  13.       }
  14.       .sbox {
  15.         font-size: 2rem;
  16.         /* background-color: lightskyblue; */
  17.         display: flex;
  18.         justify-content: center;
  19.         align-items: center;
  20.         border: 2px solid black;
  21.       }
  24.       /* 结构伪类选择器 */
  25.       ul :first-child {
  26.         background-color: #ccc;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <ul class="box1">
  32.       <li class="sbox" id="sbox">1</li>
  33.       <li class="sbox">2</li>
  34.       <li class="sbox">3</li>
  35.       <li class="sbox">4</li>
  36.       <li class="sbox center">5</li>
  37.       <li class="sbox">6</li>
  38.       <li class="sbox">7</li>
  39.       <li class="sbox">8</li>
  40.       <li class="sbox">9</li>
  41.     </ul>
  42.   </body>
  43. </html>

:last-child

  • 选择子代最后一个元素
  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>
  8.     <style>
  9.       /* 使用九宫格来演示: grid布局实现 */
  10.       .box1 {
  11.         margin: 0;
  12.         padding: 0;
  13.         width: 300px;
  14.         height: 300px;
  15.         display: grid;
  16.         grid-template-columns: repeat(3, 1fr);
  17.         gap: 5px;
  18.         border: 2px solid #000;
  19.       }
  20.       .sbox {
  21.         font-size: 2rem;
  22.         /* background-color: lightskyblue; */
  23.         display: flex;
  24.         justify-content: center;
  25.         align-items: center;
  26.         border: 2px solid black;
  27.       }
  29.       ul :last-child {
  30.         background-color: #ccc;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <ul class="box1">
  36.       <li class="sbox" id="sbox">1</li>
  37.       <li class="sbox">2</li>
  38.       <li class="sbox">3</li>
  39.       <li class="sbox">4</li>
  40.       <li class="sbox center">5</li>
  41.       <li class="sbox">6</li>
  42.       <li class="sbox">7</li>
  43.       <li class="sbox">8</li>
  44.       <li class="sbox">9</li>
  45.     </ul>
  46.   </body>
  47. </html>

:nth-child(m)

  • 选择第m个元素

  • 选择偶数：m=2n/even

  • 选择奇数：m=2n-1/odd
  • 取k以后的：m=n+k
  • 取前k个：m=-n+k
  3.     <style>
  4.       /* 使用九宫格来演示: grid布局实现 */
  5.       .box1 {
  6.         margin: 0;
  7.         padding: 0;
  8.         width: 300px;
  9.         height: 300px;
  10.         display: grid;
  11.         grid-template-columns: repeat(3, 1fr);
  12.         gap: 5px;
  13.         border: 2px solid #000;
  14.       }
  15.       .sbox {
  16.         font-size: 2rem;
  17.         /* background-color: lightskyblue; */
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.         border: 2px solid black;
  22.       }
  25.       ul :nth-child(1) {
  26.         background-color: #ccc;
  27.       }
  28.       ul :nth-child(2n) {
  29.         background-color: lightblue;
  30.       }
  31.       ul :nth-child(2n+1){
  32.         background-color: lightgreen;
  33.       }
  34.        ul :nth-child(n+3){
  35.         background-color: blue;
  36.       }
  37.        ul :nth-child(-n+3){
  38.         background-color: blue;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <ul class="box1">
  44.       <li class="sbox" id="sbox">1</li>
  45.       <li class="sbox">2</li>
  46.       <li class="sbox">3</li>
  47.       <li class="sbox">4</li>
  48.       <li class="sbox center">5</li>
  49.       <li class="sbox">6</li>
  50.       <li class="sbox">7</li>
  51.       <li class="sbox">8</li>
  52.       <li class="sbox">9</li>
  53.     </ul>
  54.   </body>
  55. </html>

:nth-last-child(m)

  • 选择倒数第m个子元素

  • 选择反序偶数：m=2n/even

  • 选择反序奇数：m=2n-1/odd
  • 取除后k-1个：m=n+k
  • 取后k个：m=-n+k
  2.   <style>
  3.     .box {
  4.       width: 50px;
  5.       height: 50px;
  6.       border: 1px solid black;
  7.       margin: 10px 10px;
  8.       float: left;
  9.     }
  11.     div :nth-last-child(even) {
  12.       background-color: #ccc;
  13.     }
  15.     div :nth-last-child(odd) {
  16.       background-color: white;
  17.     }
  18.   </style>
  19.   <body>
  20.     <div class="bbox">
  21.       <div class="box"></div>
  22.       <div class="box"></div>
  23.       <div class="box"></div>
  24.       <div class="box"></div>
  25.       <div class="box"></div>
  26.       <div class="box"></div>
  27.       <div class="box"></div>
  28.       <div class="box"></div>
  29.       <div class="box"></div>
  30.       <div class="box"></div>
  31.     </div>
  32.   </body>
  33. </html>

因为整体个数为偶数个，所以反序的偶数为正序的奇数，反序的奇数为正序的偶数。

计算规律以nth-child相似

:first-of-type

  • 子元素中每个标签组的首个
  2.       <style>
  3.         /* 使用九宫格来演示: grid布局实现 */
  4.         .box1 {
  5.           margin: 0;
  6.           padding: 0;
  7.           width: 300px;
  8.           height: 300px;
  9.           display: grid;
  10.           grid-template-columns: repeat(3, 1fr);
  11.           gap: 5px;
  12.           border: 2px solid #000;
  13.         }
  14.         .sbox {
  15.           font-size: 2rem;
  16.           /* background-color: lightskyblue; */
  17.           display: flex;
  18.           justify-content: center;
  19.           align-items: center;
  20.           border: 2px solid black;
  21.         }
  23.         ul :first-of-type {
  24.           background-color: lightblue;
  25.         }
  26.       </style>
  27.     </head>
  28.     <body>
  29.       <ul class="box1">
  30.         <li class="sbox" id="sbox">1</li>
  31.         <li class="sbox">2</li>
  32.         <span class="sbox">3</span>
  33.         <li class="sbox">4</li>
  34.         <span class="sbox center">5</span>
  35.         <li class="sbox">6</li>
  36.         <span class="sbox">7</span>
  37.         <li class="sbox">8</li>
  38.         <li class="sbox">9</li>
  39.       </ul>
  40.     </body>

:last-of-type

  • 子代元素中每个标签组的 最后一个

:nth-of-type(m)

  • 元素各分组的第几个

:nth-last-of-type(m)

  • 元素各分组的倒数第几个

m可以代入同上公式

  1.     <style>
  2.       /* 使用九宫格来演示: grid布局实现 */
  3.       .box1 {
  4.         margin: 0;
  5.         padding: 0;
  6.         width: 300px;
  7.         height: 300px;
  8.         display: grid;
  9.         grid-template-columns: repeat(3, 1fr);
  10.         gap: 5px;
  11.         border: 2px solid #000;
  12.       }
  13.       .sbox {
  14.         font-size: 2rem;
  15.         /* background-color: lightskyblue; */
  16.         display: flex;
  17.         justify-content: center;
  18.         align-items: center;
  19.         border: 2px solid black;
  20.       }
  22.       ul :nth-of-type(3) {
  23.         background-color: lightblue;
  24.       }
  25.        ul :nth-last-of-type(3) {
  26.         background-color: lightblue;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <ul class="box1">
  32.       <li class="sbox" id="sbox">1</li>
  33.       <li class="sbox">2</li>
  34.       <span class="sbox">3</span>
  35.       <li class="sbox">4</li>
  36.       <span class="sbox center">5</span>
  37.       <li class="sbox">6</li>
  38.       <span class="sbox">7</span>
  39.       <li class="sbox">8</li>
  40.       <li class="sbox">9</li>
  41.     </ul>
  42.   </body>

伪类、伪元素

:target

  • 与id配合，实现锚点操作，可用于当前活动的target元素的样式
  1.  <style>
  2.    #mcdm {
  3.      display: none;
  4.    }
  5.    #mcdm:target {
  6.      display: block;
  7.      background-color: cornflowerblue;
  8.    }
  9.  </style>
  10.  <body>
  11.    <div>
  12.      <a href="#mcdm"> 跳转</a>
  13.      <hr />
  14.      <span id="mcdm">锚点</span>
  15.    </div>
  16.  </body>

:focus

  • 获取焦点时候执行
  2.   <style>
  3.     input:focus {
  4.       background-color: lightblue;
  5.     }
  6.   </style>
  7.   <body>
  8.     用户名：<input type="text" placeholder="请输入用户名" /> 密码：<input
  9.       type="password"
  10.       placeholder="请输入密码"
  11.     />
  12.   </body>

::selection

  • 设置选中文本的前景色与背景色
  2. <style>
  3.   input::selection {
  4.     background-color: lightblue;
  5.     color: white;
  6.   }
  7. </style>
  8. <body>
  9.   用户名：<input type="text" placeholder="请输入用户名" /> 密码：<input
  10.     type="password"
  11.     placeholder="请输入密码"
  12.   />
  13. </body>

:not()

  • 选择不满足条件的元素
  1.  <style>
  2.    ul :not(:last-of-type) {
  3.      font-style: italic;
  4.      background-color: blue;
  5.      color: white;
  6.    }
  7.  </style>
  8.  <body>
  9.    <ul>
  10.      <li>这是li标签</li>
  11.      <li>这是li标签</li>
  12.      <li>这是li标签</li>
  13.      <span>这是span标签</span>
  14.      <span>这是span标签</span>
  15.      <span>这是span标签</span>
  16.    </ul>
  17.  </body>

::before

  • 在元素内容前添加
  1.  <style>
  2.    .box2::before {
  3.      content: "我在第二个div的前面";
  4.    }
  5.  </style>
  6.  <body>
  7.    <div>第一个div</div>
  8.    <div class="box2">第二个div</div>
  9.  </body>

::after

  • 在元素内容后生成

    1. <style>
    2.   .box2::after {
    3.     content: "我在第二个div的后面";
    4.     color: red;
    5.   }
    6. </style>
    7. <body>
    8.   <div>第一个div</div>
    9.   <div class="box2">第二个div</div>
    10. </body>

Correcting teacher：WJWJ

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