简体中文（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月13日 18:31:38682浏览

选择器

1. 简单选择器

1.1 种类

序号 选择器 描述 举例
1 元素选择器 根据元素标签名称进行匹配 div {...}
2 群组选择器 同时选择多个不同类型的元素 h1,h2,h3{...}
3 通配选择器 选择全部元素,不区分类型 * {...}
4 属性选择器 根据元素属性进行匹配 *[...]
5 类选择器 根据元素 class 属性进行匹配 *.active {...}
6 id 选择器 根据元素 id 属性进行匹配 *#top {...}
  • 元素是使用标签和属性进行描述,所以使用标签和属性来选择元素非常自然和直观
  • 以上 6 种,其实可分为二类: 元素选择器和属性选择器, 其它的只是二者的特例罢了
  • 最常用的是: 元素选择器, 类选择器, id 选择器
  • 当 class,id 选择器不限定被修改的元素类型时, 星号”*“可以省略
  • id,class 可以添加到任何元素上，前面的元素限定符默认就是*，所以可以不写
  • id 页面中只用一次
  • 标签 < class 属性 < id 属性

演示代码如下

  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.       /* 元素选择器案例 */
  9.       body {
  10.         background-color: rgb(212, 190, 190);
  11.       }
  13.       /* 群组选择器案例 */
  14.       h1,
  15.       h2,
  16.       h3,
  17.       p {
  18.         background-color: rgb(255, 255, 255);
  19.       }
  21.       /* 通配符选择器案例， */
  22.       *.item {
  23.         background-color: oldlace;
  24.       }
  26.       /* 属性选择器案例 */
  27.       /* .item[title="练习属性选择器"] { */
  28.       /* 有多个title属性的时候下面的就应用到多个属性 */
  29.       .item[title="练习属性选择器"] {
  30.         background-color: orange;
  31.       }
  32.       /* 类选择器案例 */
  33.       .container {
  34.         width: 300px;
  35.         height: 300px;
  36.         display: grid;
  37.         grid-template-columns: repeat(3, 1fr);
  38.         gap: 5px;
  39.       }
  41.       .item {
  42.         font-size: 2rem;
  43.         background-color: lightblue;
  44.         display: flex;
  45.         justify-content: center;
  46.         align-items: center;
  47.       }
  49.       /* 多个类选择器案例 */
  50.       .item.five {
  51.         background-color: limegreen;
  52.       }
  53.       /* id选择器案例 */
  54.       #eight {
  55.         background-color: maroon;
  56.       }
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <h1>大家好，我的php中文网的一名学生</h1>
  61.     <h2>我学习的是PHP中文网第11期课程</h2>
  62.     <h3>我叫昊天</h3>
  63.     <p>初来乍到，多多指点</p>
  64.     <div class="container">
  65.       <div class="item">1</div>
  66.       <div class="item">2</div>
  67.       <div class="item" title="练习属性选择器">3</div>
  68.       <div class="item">4</div>
  69.       <div class="item five">5</div>
  70.       <div class="item">6</div>
  71.       <div class="item">7</div>
  72.       <div class="item" id="eight">8</div>
  73.       <div class="item">9</div>
  74.     </div>
  75.   </body>
  76. </html>

2. 上下文选择器

  • html 文档,看上去就像一颗倒置的”树”,所以是有层级结构的
  • 每一个元素, 在文档中, 都有自己的位置,即上下文关系
  • 所以, 完全可以根据元素的上下文关系,来获取到它们

2.1 一个元素的四种角色

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

2.2 四种上下文选择器

序号 选择器 操作符 描述 举例
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ 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>上下文选择器案例</title>
  7.     <style>
  8.       /* 后代选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  24.       /* 父子选择器 */
  25.       div > .item {
  26.         background-color: orangered;
  27.       }
  28.       /* 同级相邻选择器 */
  29.       /* 选择第4个 */
  30.       .item.center + .item {
  31.         background-color: #ffffff;
  32.       }
  33.       h1 + h1 {
  34.         background-color: purple;
  35.       }
  37.       /* 同级所有选择器 */
  38.       /* 选择3后面的所有有共同父级的 */
  39.       .item.center ~ .item {
  40.         background-color: royalblue;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div>
  46.       <h1>html</h1>
  47.       <h1>html</h1>
  48.       <h2>css</h2>
  49.       <h3>php</h3>
  50.     </div>
  51.     <div class="container">
  52.       <div class="item">1</div>
  53.       <div class="item">2</div>
  54.       <div class="item center">3</div>
  55.       <div class="item">4</div>
  56.       <div class="item">5</div>
  57.       <div class="item">6</div>
  58.       <div class="item">7</div>
  59.       <div class="item">8</div>
  60.       <div class="item">9</div>
  61.     </div>
  62.   </body>
  63. </html>

3. 伪类选择器

  • 学习之前,先分析上下文选择器的局限性,例如选择同一个父级下的第二个子元素,就没那么简单
  • 而伪类就正好弥补了上下文选择器的短板, 所以伪类,大多数是基于文档中元素结构的
  • 伪: 本意是假的,不存在的意思, 这里是特指, 不需要在元素上添加额外的属性来获取元素
  • 类: 暗指伪类的级别, 仍然是属于”class”级别, 仍然属于属性选择器范畴,级别高于元素选择器

我们重点放在伪类最重要的应用场景:

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

3.1 结构伪类

3.1.1 不分组匹配

序号 选择器 描述 举例
1 :first-child 匹配第一个子元素 div :first-child
2 :last-child 匹配最后一个子元素 div :last-child
3 :only-child 选择元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :nth-last-child(n) 匹配倒数任意位置的子元素 div :nth-last-child(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.       /* 后代选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  24.       .container > :first-child {
  25.         background-color: rgb(235, 138, 135);
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div>
  31.       <h1>1</h1>
  32.       <h1>2</h1>
  33.       <h1>3</h1>
  34.       <h1>4</h1>
  35.       <h1>5</h1>
  36.       <h1>6</h1>
  37.       <h2>css</h2>
  38.       <h3>php</h3>
  39.     </div>
  40.     <div class="container">
  41.       <div class="item">1</div>
  42.       <div class="item">2</div>
  43.       <div class="item">3</div>
  44.       <div class="item">4</div>
  45.       <div class="item">5</div>
  46.       <div class="item">6</div>
  47.       <div class="item">7</div>
  48.       <div class="item">8</div>
  49.       <div class="item">9</div>
  50.     </div>
  51.   </body>
  52. </html>
匹配最后一个子元素案例
  • 截图如下
  • 代码如下
  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.       /* 后代选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  24.       .container > :last-child {
  25.         background-color: rgb(235, 138, 135);
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div>
  31.       <h1>1</h1>
  32.       <h1>2</h1>
  33.       <h1>3</h1>
  34.       <h1>4</h1>
  35.       <h1>5</h1>
  36.       <h1>6</h1>
  37.       <h2>css</h2>
  38.       <h3>php</h3>
  39.     </div>
  40.     <div class="container">
  41.       <div class="item">1</div>
  42.       <div class="item">2</div>
  43.       <div class="item">3</div>
  44.       <div class="item">4</div>
  45.       <div class="item">5</div>
  46.       <div class="item">6</div>
  47.       <div class="item">7</div>
  48.       <div class="item">8</div>
  49.       <div class="item">9</div>
  50.     </div>
  51.   </body>
  52. </html>
选择元素的唯一子元素
  • 截图如下
  • 代码如下
  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.       /* 后代选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  24.       /* 选择元素的唯一子元素 */
  25.       h1:only-child {
  26.         background-color: springgreen;
  27.       }
  28.     </style>
  29.   </head>
  30.   <body>
  31.     <div>
  32.       <h1>1</h1>
  33.       <h1>2</h1>
  34.       <h1>3</h1>
  35.       <h1>4</h1>
  36.       <h1>5</h1>
  37.       <h1>6</h1>
  38.       <h2>css</h2>
  39.       <h3>php</h3>
  40.     </div>
  41.     <div>
  42.       <h1>mysql</h1>
  43.     </div>
  44.     <div class="container">
  45.       <div class="item">1</div>
  46.       <div class="item">2</div>
  47.       <div class="item">3</div>
  48.       <div class="item">4</div>
  49.       <div class="item">5</div>
  50.       <div class="item">6</div>
  51.       <div class="item">7</div>
  52.       <div class="item">8</div>
  53.       <div class="item">9</div>
  54.     </div>
  55.   </body>
  56. </html>
匹配任意位置子元素
  • 截图如下
  • 代码如下
  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.       /* 后代选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  25.       .container > .item:nth-child(5) {
  26.         background-color: tomato;
  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">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>
匹配倒数任意位置的子元素
  • 截图如下
  • 代码如下
  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.       /* 后代选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  25.       .container > .item:nth-last-child(2) {
  26.         background-color: tomato;
  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">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>
选择偶数子元素
  • 截图如下
  • 代码如下
  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.       /* 后代选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  25.       .container > .item:nth-of-type(2n) {
  26.         background-color: tomato;
  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">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>
选择奇数子元素
  • 截图如下
  • 代码如下
  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.       /* 后代选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  25.       .container > .item:nth-of-type(2n-1) {
  26.         background-color: tomato;
  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">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>

3.1.2 分组匹配

序号 选择器 描述 举例
1 :first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
2 :last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
3 :only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
5 :nth-last-of-type() 匹配按类型分组后倒数任意位置的子元素 div :nth-last-of-type(n)
  • 允许使用表达式来匹配一组元素,表达式中的”n”是从”0”开始计数,且必须写到前面

  • “-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.       /* 后代选择器 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  17.       .item {
  18.         font-size: 2rem;
  19.         background-color: lightblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  24.       /* 选择当前分组的第一个元素 */
  25.       .container > span:first-of-type {
  26.         background-color: tomato;
  27.       }
  29.       /* 选择当前分组的最后一个元素 */
  30.       /* 选择的是div的最后一个元素哦 */
  31.       .container div:last-of-type {
  32.         background: #0080ff;
  33.       }
  35.       /* 选择分组后的唯一子元素 */
  36.       div h1:only-of-type {
  37.         color: turquoise;
  38.       }
  39.       /* 选择当前分组span的第三个元素也就是 7  */
  40.       .container span:nth-of-type(3) {
  41.         background-color: teal;
  42.       }
  44.       /* 选择当前分组span的倒数第二个元素 */
  45.       .container span:nth-last-of-type(2) {
  46.         background-color: yellowgreen;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <div>
  52.       <h1>选择器</h1>
  53.     </div>
  54.     <div class="container">
  55.       <div class="item">1</div>
  56.       <div class="item">2</div>
  57.       <div class="item">3</div>
  58.       <div class="item">4</div>
  59.       <!-- 分为2组 -->
  60.       <span class="item">5</span>
  61.       <span class="item">6</span>
  62.       <span class="item">7</span>
  63.       <span class="item">8</span>
  64.       <span class="item">9</span>
  65.     </div>
  66.   </body>
  67. </html>

3.3 其它伪类

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

总结

  • n 表达式(-n + 3)就是获取前 3 个，（n + 4）就是获取从 4 个开始后面全部
  • 偶数是 even=2n ，奇数是 add=2n-1
  • 没想到 css 还可以用这样的方式来写，感觉好牛逼的样子
  • css 选择器 class id 这些是简单的，不高级，伪类选择器，以前都没有听说过，写完感觉也没有多难，主要是那些单词得记住
上一条：html:FLEX实战，仿php中文网手机端网站（0410）下一条：仿Php中文网作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
昊天2020-04-14 13:33:041楼
好的 谢谢老师

相关文章

查看更多