简体中文（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基础 - 多种选择器详解

晴天
晴天原创
2020年04月07日 18:59:19750浏览

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可以选择同一父级中有多个元素，但他的标签名是当前父级唯一的元素
上一条：css层叠样式表学习进阶（伪类选择器是重点）下一条：元素框知识+CSS文件和媒体查询的语法及引用方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多