Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS基础 - 多种选择器详解
Blogger Information
Blog 47
fans 1
comment 0
visits 53066
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基础 - 多种选择器详解
晴天
Original
754 people have browsed it

CSS 基础 - 选择器详解

选择器分为三种

  • 简单选择器
  • 上下文选择器
  • 伪类选择器

1 . 简单选择器

种类

选择器 描述 举例 备注
元素选择器 根据元素标签名进行匹配 div{width:200px;} 给页面中所有元素标签名为 div 的设置宽度
群组选择器 同时选择多个不同类型的元素 div,main,nav{width:200px} 多个元素标签名之间用逗号分割
通配选择器 选择全部元素，不区分类型 *{width:200px;} 页面中的所有元素都给宽度 200
属性选择器 根据元素中的属性进行匹配 div[title]{width:200px} 给页面中所有 div 含有 title 属性的元素设置宽度
类选择器 根据元素 class 属性进行匹配 .container{width:200px;} 给页面所有元素属性 class 等于 container 的设置宽度
id 选择器 根据元素 id 属性进行匹配 #top{width:200px;} 给页面中元素属性 id 等于 top 的设置宽度
  • 以上六种，其实可分为二类：元素选择器和属性选择器，其他只是二者的特例罢了
  • 标签< class 属性 < id

2.上下文选择器

  • 根据元素的层级结构的上下文关系选择

2.1 一个元素的四种角色

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

2.2 上下文选择器分为四种

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

2.2.1 后代选择器演示

  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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  23.       /* 后代选择器 */
  24.       body div {
  25.         border: 3px solid black;
  26.       }
  27.       /* 给body元素下的所有后代元素div加黑色边框 */
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="container">
  32.       <div class="item">1</div>
  33.       <div class="item">2</div>
  34.       <div class="item">3</div>
  35.       <div class="item">4</div>
  36.       <div class="item">5</div>
  37.       <div class="item">6</div>
  38.       <div class="item">7</div>
  39.       <div class="item">8</div>
  40.       <div class="item">9</div>
  41.     </div>
  42.   </body>
  43. </html>

原始效果
QQ图片20200407151137.png
用后效果
QQ截图20200407151838.png

2.2.2 父子选择器演示

  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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 父子选择器 */
  23.       body > div {
  24.         border: 3px solid black;
  25.       }
  26.       /* 只给body元素的子元素div加边框 */
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="container">
  31.       <div class="item">1</div>
  32.       <div class="item">2</div>
  33.       <div class="item">3</div>
  34.       <div class="item">4</div>
  35.       <div class="item">5</div>
  36.       <div class="item">6</div>
  37.       <div class="item">7</div>
  38.       <div class="item">8</div>
  39.       <div class="item">9</div>
  40.     </div>
  41.   </body>
  42. </html>

原始效果
QQ图片20200407151137.png
用后效果
QQ截图20200407152730.png

2.2.3 同级相邻选择器演示

  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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 同级相邻选择器 */
  23.       .item.center + div {
  24.         color: blanchedalmond;
  25.         background-color: black;
  26.       }
  27.       /* 只选中同一父级且相邻的下一个元素 */
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="container">
  32.       <div class="item">1</div>
  33.       <div class="item">2</div>
  34.       <div class="item">3</div>
  35.       <div class="item">4</div>
  36.       <div class="item center">5</div>
  37.       <div class="item">6</div>
  38.       <div class="item">7</div>
  39.       <div class="item">8</div>
  40.       <div class="item">9</div>
  41.     </div>
  42.   </body>
  43. </html>

原始效果
QQ图片20200407151137.png
用后效果
QQ截图20200407153911.png

2.2.4 同级所有选择器演示

  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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 同级所有选择器 */
  23.       .item.center ~ div {
  24.         color: cornsilk;
  25.         background-color: black;
  26.       }
  27.       /* 选中同一父级下后续所有div元素 */
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="container">
  32.       <div class="item">1</div>
  33.       <div class="item">2</div>
  34.       <div class="item">3</div>
  35.       <div class="item">4</div>
  36.       <div class="item center">5</div>
  37.       <div class="item">6</div>
  38.       <div class="item">7</div>
  39.       <div class="item">8</div>
  40.       <div class="item">9</div>
  41.     </div>
  42.   </body>
  43. </html>

原始效果
QQ图片20200407151137.png
用后效果
QQ截图20200407154241.png

3. 伪类选择器

  • 上下文选择器有一定的局限性，想选择统一父级下的第二个子元素就没那么简答，而伪类选择器正好弥补他的短板，所以伪类大多数是基于文档中的元素结构的

  • 应用场景：

场景 描述
结构伪类 根据子元素的位置特征进行选择
表单伪类 根据表单控件状态特征进行选择

3.1 结构伪类

3.1.1 不分组匹配

选择器 描述 举例
:first-child 匹配第一个子元素 div:first-child
:last-child 匹配最后一个元素 div:last-child
:only-child 选中元素的唯一子元素 div:only-child
:nth-child(n) 匹配任意位置的子元素 div:nth-child(n)
:nth-last-child(n) 匹配倒数任意位置的子元素 div:nth-last-child(n)
  • a 匹配第一个子元素演示
  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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  23.       /* 匹配第一个子元素 */
  24.       .container > :first-child {
  25.         background-color: black;
  26.         color: cornsilk;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="container">
  32.       <div class="item">1</div>
  33.       <div class="item">2</div>
  34.       <div class="item">3</div>
  35.       <div class="item">4</div>
  36.       <div class="item center">5</div>
  37.       <div class="item">6</div>
  38.       <div class="item">7</div>
  39.       <div class="item">8</div>
  40.       <div class="item">9</div>
  41.     </div>
  42.   </body>
  43. </html>

原始效果
QQ图片20200407151137.png
用后效果
QQ截图20200407160106.png

  • b 匹配最后一个子元素演示
  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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  23.       /* 匹配最后一个子元素 */
  24.       .container > :last-child {
  25.         background-color: black;
  26.         color: cornsilk;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="container">
  32.       <div class="item">1</div>
  33.       <div class="item">2</div>
  34.       <div class="item">3</div>
  35.       <div class="item">4</div>
  36.       <div class="item center">5</div>
  37.       <div class="item">6</div>
  38.       <div class="item">7</div>
  39.       <div class="item">8</div>
  40.       <div class="item">9</div>
  41.     </div>
  42.   </body>
  43. </html>

原始效果
QQ图片20200407151137.png
用后效果
QQ截图20200407160250.png

  • c 选中元素的唯一子元素演示
  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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 匹配元素中的唯一子元素 */
  23.       p:only-child {
  24.         color: crimson;
  25.       }
  26.       /* 只匹配当前父元素中只有他唯一一个子元素，有多个的不匹配 */
  27.       /* 就像是只找独生子女中的女孩<p>,给她打扮打扮。不是独生子女的不管他 */
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div class="container">
  32.       <div class="item">1</div>
  33.       <div class="item">2</div>
  34.       <div class="item">3</div>
  35.       <div class="item">4</div>
  36.       <div class="item center">5</div>
  37.       <div class="item">6</div>
  38.       <div class="item">7</div>
  39.       <div class="item">8</div>
  40.       <div class="item">9</div>
  41.     </div>
  42.     <div>
  43.       <p>PHP中文网</p>
  44.       <!-- 当前元素中只有一个子元素 -->
  45.     </div>
  46.     <div>
  47.       <p>PHP中文网</p>
  48.       <p>PHP中文网</p>
  49.       <!-- 当前元素中有两个子元素 -->
  50.     </div>
  51.   </body>
  52. </html>

原始效果
QQ截图20200407162812.png
用后效果
QQ截图20200407162652.png

  • d 匹配任意位置的子元素演示

  • :nth-child(n)中的 n 可以是数字

  • 也可以多选 （）中改成 （n+4）

  • n 的值从零开始 也就是匹配

    • 0+4=4
    • 1+4=5
    • …+4

  • 当前父元素中只有九个子元素

    • 那么从 4 开始的 456789 都会改变样式

  • 而且支持表达式

    • 2n 选中所有偶数
    • 2n-1 选中所有奇数

  • 选择前三个

    • :nth-child(-n+3)
  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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  23.       /* 匹配任意位置子元素 */
  24.       .container > :nth-child(4) {
  25.         background-color: black;
  26.         color: cornsilk;
  27.       }
  28.       /* 匹配正数第四个元素 */
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.       <div class="item center">5</div>
  38.       <div class="item">6</div>
  39.       <div class="item">7</div>
  40.       <div class="item">8</div>
  41.       <div class="item">9</div>
  42.     </div>
  43.   </body>
  44. </html>

原始效果
QQ图片20200407151137.png
用后效果
QQ截图20200407161457.png

  • e 匹配倒数任意位置子元素演示
  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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  23.       /* 匹配倒数任意位置子元素 */
  24.       .container > :nth-last-child(4) {
  25.         background-color: black;
  26.         color: cornsilk;
  27.       }
  28.       /* 匹配倒数第四个元素 */
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.       <div class="item center">5</div>
  38.       <div class="item">6</div>
  39.       <div class="item">7</div>
  40.       <div class="item">8</div>
  41.       <div class="item">9</div>
  42.     </div>
  43.   </body>
  44. </html>

原始效果
QQ图片20200407151137.png
用后效果
QQ截图20200407161643.png

3.1.2 分组匹配

选择器 描述
:fist-of-type 匹配按类型分组后的第一个子元素
:last-of-type 匹配按类型分组后的最后一个子元素
:only-of-type 匹配按类型分组后的唯一一个子元素
:nth-of-type(n) 匹配按类型分组后任意位置子元素
:nth-last-of-type 匹配按类型分组后倒数人一位子子元素

  • 允许使用表达式来匹配任意一组元素，表达式中的 n 是从 0 开始计数，且必须写在前面

  • -n 表示获取指定位置前面的所有元素，n 表示获取后面

  • a :fist-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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 分组匹配 */
  23.       .container > div:first-of-type {
  24.         background-color: black;
  25.         color: blanchedalmond;
  26.       }
  27.       /* 匹配分组后的第一个div */
  28.       .container > span:first-of-type {
  29.         background-color: blue;
  30.         color: cornsilk;
  31.       }
  32.       /* 匹配分组后的第一个span */
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <div class="item">1</div>
  38.       <div class="item">2</div>
  39.       <div class="item">3</div>
  40.       <div class="item">4</div>
  41.       <div class="item center">5</div>
  42.       <span class="item">6</span>
  43.       <span class="item">7</span>
  44.       <span class="item">8</span>
  45.       <span class="item">9</span>
  46.     </div>
  47.   </body>
  48. </html>

  • 原始效果
    QQ图片20200407151137.png

  • 使用后
    QQ截图20200407182510.png

  • b :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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 分组匹配 */
  23.       .container > div:last-of-type {
  24.         background-color: crimson;
  25.         color: cyan;
  26.       }
  27.       /* p匹配分组后的最后一个div */
  28.       .container > span:last-of-type {
  29.         background-color: lightgreen;
  30.         color: lightsalmon;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item">1</div>
  37.       <div class="item">2</div>
  38.       <div class="item">3</div>
  39.       <div class="item">4</div>
  40.       <div class="item center">5</div>
  41.       <span class="item">6</span>
  42.       <span class="item">7</span>
  43.       <span class="item">8</span>
  44.       <span class="item">9</span>
  45.     </div>
  46.   </body>
  47. </html>

  • 原始效果
    QQ图片20200407151137.png

  • 使用后
    QQ截图20200407182820.png

  • c :only-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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 分组匹配 */
  23.       /* 匹配分组后的唯一一个元素 */
  24.       /* 跟 :only-child 不同 */
  25.       /* :only-child 是只寻找独生子女中的女孩<p> */
  26.       /* :only-of-type 也寻找非独生子女中只有一个女儿的女孩<p> */
  27.       .container > p:only-of-type {
  28.         background-color: lightsalmon;
  29.         color: slateblue;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="container">
  35.       <div class="item">1</div>
  36.       <div class="item">2</div>
  37.       <div class="item">3</div>
  38.       <div class="item">4</div>
  39.       <div class="item center">5</div>
  41.       <span class="item">6</span>
  42.       <span class="item">7</span>
  43.       <span class="item">8</span>
  44.       <span class="item">9</span>
  45.       <!-- 添加一个唯一元素 -->
  46.       <p>PHP中文网</p>
  47.     </div>
  48.   </body>
  49. </html>

  • 原始效果
    QQ截图20200407183634.png

  • 使用后
    QQ截图20200407183510.png

  • d :nth-of-type(n)演示
  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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 分组匹配 */
  23.       /* 寻找分组后第三个div */
  24.       .container > div:nth-of-type(3) {
  25.         background-color: black;
  26.         color: blanchedalmond;
  27.       }
  28.       /* 寻找分组后第三个span */
  29.       .container > span:nth-of-type(3) {
  30.         background-color: blue;
  31.         color: cornsilk;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <div class="item">1</div>
  38.       <div class="item">2</div>
  39.       <div class="item">3</div>
  40.       <div class="item">4</div>
  41.       <div class="item center">5</div>
  43.       <span class="item">6</span>
  44.       <span class="item">7</span>
  45.       <span class="item">8</span>
  46.       <span class="item">9</span>
  47.     </div>
  48.   </body>
  49. </html>

  • 原始效果
    QQ图片20200407151137.png

  • 使用后
    QQ截图20200407184102.png

  • e :nth-last-of-type(n)演示
  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>选择器</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         height: 300px;
  11.         display: grid;
  12.         grid-template-columns: repeat(3, 1fr);
  13.         gap: 5px;
  14.       }
  15.       .item {
  16.         font-size: 2rem;
  17.         background-color: lightskyblue;
  18.         display: flex;
  19.         justify-content: center;
  20.         align-items: center;
  21.       }
  22.       /* 分组匹配 */
  23.       /* 寻找分组后倒数第四个div */
  24.       .container > div:nth-last-of-type(4) {
  25.         background-color: black;
  26.         color: blanchedalmond;
  27.       }
  28.       /* 寻找分组后倒数第四个span */
  29.       .container > span:nth-last-of-type(4) {
  30.         background-color: blue;
  31.         color: cornsilk;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <div class="item">1</div>
  38.       <div class="item">2</div>
  39.       <div class="item">3</div>
  40.       <div class="item">4</div>
  41.       <div class="item center">5</div>
  43.       <span class="item">6</span>
  44.       <span class="item">7</span>
  45.       <span class="item">8</span>
  46.       <span class="item">9</span>
  47.     </div>
  48.   </body>
  49. </html>

  • 原始效果
    QQ图片20200407151137.png

  • 使用后
    QQ截图20200407184301.png

3.3 其它伪类

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

课程总结

  • 关于 css 的选择器中，最常用的简单选择器是元素选择器、类选择器、id 选择器

  • 上下文选择器中主要是后代选择器跟父子选择器常用，其余两个有一定的局限性，直接使用伪类选择器

  • 重点在伪类选择器，每个选择器都要牢记，为在后期编辑 css 样式是带来很大的便利。

  • 其中:first-child跟:nth-child(1)效果相同，都是选择第一个 -:last-child跟:nth-last-child(1)效果相同，都是选择最后一个

  • :only-child个人认为没有:only-of-type好用

    • :only-child只选择同一父级中只有他唯一一个元素
    • :only-of-type可以选择同一父级中有多个元素，但他的标签名是当前父级唯一的元素
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