简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >CSS选择器的用法和含义

CSS选择器的用法和含义

Blueprint
Blueprint原创
2020年06月16日 15:39:211654浏览

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

选择器的作用

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>

上一条：下拉菜单的css样式和js代码解析下一条：实战案例仿：PHP中文网导航栏
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多