Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 了解 CSS 选择器：简单选择器、上下文选择器、结构伪类选择器、伪类和伪元素
Blogger Information
Blog 13
fans 0
comment 0
visits 11198
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
595 people have browsed it

一、简单选择器

选择器名 符号 描述
元素选择器 某个 HTML 元素 比如 p、h1、em、a，甚至可以是 html 本身
类选择器 . 对应着 html 标签中的 class 属性
id 选择器 # 对应着 html 标签中的 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.       /* 使用九宫格来演示: grid布局实现 */
  9.       .container {
  10.         width: 300px;
  11.         height: 300px;
  12.         display: grid;
  13.         grid-template-columns: repeat(3, 1fr);
  14.         gap: 5px;
  15.       }
  16.       .item {
  17.         font-size: 2rem;
  18.         background-color: lightskyblue;
  19.         display: flex;
  20.         justify-content: center;
  21.         align-items: center;
  22.       }
  24.       /* 简单选择器 */
  25.       /* 元素选择器: 标签选择器 */
  26.       body {
  27.         background-color: lightcyan;
  28.       }
  29.       /* 类选择器: 对应着html标签中的class属性 */
  30.       .item {
  31.         border: 1px solid #000;
  32.       }
  33.       /* 多个类复合应用 */
  34.       .item.center {
  35.         background-color: lightgreen;
  36.       }
  37.       /* id选择器 */
  38.       .item#first {
  39.         background-color: lightpink;
  40.       }
  42.       /* 层叠样式表， 相同元素，后面追加的样式会覆盖前面的样式 */
  43.       *#first {
  44.         background-color: yellow;
  45.       }
  47.       #first.item {
  48.         background-color: red;
  49.       }
  51.       /* * :属于元素级别
  52.       元素 < class < id */
  53.       /* id,class可以添加到任何元素上，所以可以省略 */
  55.       /* id 选择器的应用场景目前只有二种场景： 表单元素， 锚点 */
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <div class="container">
  60.       <div class="item" id="first">1</div>
  61.       <div class="item">2</div>
  62.       <div class="item">3</div>
  63.       <div class="item">4</div>
  64.       <div class="item center">5</div>
  65.       <div class="item">6</div>
  66.       <div class="item">7</div>
  67.       <div class="item">8</div>
  68.       <div class="item">9</div>
  69.     </div>
  70.   </body>
  71. </html>

效果预览：

二、上下文选择器

选择器名 符号 描述
后代选择器 空格 标签 1 标签 2，获取到标签 1 的所有叫标签 2 的元素
父子选择器 > 标签 1 > 标签 2，标签 2 必须是标签 1 的子元素。与其他常规的上下文选择符不同，这个选择符中的标签 1 不能使标签 2 的父元素之外的其他祖先元素
同级(相邻)兄弟选择器 + 标签 1 + 标签 2，标签 2 必须紧跟在其同胞标签 1 的后面
同级所有选择器 ~ 标签 1 ~ 标签 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.   </head>
  8.   <style>
  9.     /* 使用九宫格来演示: grid布局实现 */
  10.     .container {
  11.       width: 300px;
  12.       height: 300px;
  13.       display: grid;
  14.       grid-template-columns: repeat(3, 1fr);
  15.       gap: 5px;
  16.     }
  17.     .item {
  18.       font-size: 2rem;
  19.       background-color: lightskyblue;
  20.       display: flex;
  21.       justify-content: center;
  22.       align-items: center;
  23.     }
  25.     /* 1.后代选择器 ： 空格 */
  26.     .container div {
  27.       border: 1px solid red;
  28.     }
  29.     /* 2.父子选择器： >  */
  30.     body > div {
  31.       border: 5px solid blue;
  32.     }
  33.     /* 3.同级相邻(兄弟)选择器 */
  34.     .item.center + .item {
  35.       border: 5px solid green;
  36.     }
  37.     /* 4.同级所有选择器 */
  38.     .item.next ~ .item {
  39.       border: 5px solid yellow;
  40.     }
  41.   </style>
  42.   <body>
  43.     <div class="container">
  44.       <div class="item">1</div>
  45.       <div class="item">2</div>
  46.       <div class="item">3</div>
  47.       <div class="item">4</div>
  48.       <div class="item center">5</div>
  49.       <div class="item next">6</div>
  50.       <div class="item">7</div>
  51.       <div class="item">8</div>
  52.       <div class="item">9</div>
  53.     </div>
  54.   </body>
  55. </html>

效果预览：

三、结构伪类选择器

不分组(不区分元素类型) 分组（区分元素类型）
:first-child :first-of-type
:last-child :last-of-type
:nth-child(n) :nth-of-type()
:nth-last-child(n) :nth-last-of-tyle()

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.   </head>
  8.   <style>
  9.     /* 使用九宫格来演示: grid布局实现 */
  10.     .container {
  11.       width: 300px;
  12.       height: 300px;
  13.       display: grid;
  14.       grid-template-columns: repeat(3, 1fr);
  15.       gap: 5px;
  16.     }
  17.     .item {
  18.       font-size: 2rem;
  19.       background-color: lightskyblue;
  20.       display: flex;
  21.       justify-content: center;
  22.       align-items: center;
  23.     }
  24.     /* 1.匹配第一个子元素 */
  25.     .container > *:first-child {
  26.       /* background-color: lightgreen; */
  27.     }
  28.     .container > .item:first-child {
  29.       /* background-color: blue; */
  30.     }
  31.     /* 2.匹配最后一个子元素 */
  32.     .container > :last-child {
  33.       /* background-color: blueviolet; */
  34.     }
  35.     /* 3.选第三个:索引从1开始 */
  36.     .container > :nth-child(3) {
  37.       /* background-color: lightgreen; */
  38.     }
  40.     /* n从0开始计算 */
  41.     /* 4.只选择偶数单元格(4n)或(even) */
  42.     .container > :nth-child(2n) {
  43.       /* background-color: blue;  */
  44.     }
  45.     /* 5.只选择奇数单元格(2n + 1)或(2n - 1)或(odd) */
  46.     .container > :nth-child(odd) {
  47.       /* background-color: green; */
  48.     }
  49.     /* 6.从指定位置（从第4个开始），选择器盛下的所有元素 */
  50.     .container > .item:nth-child(n + 4) {
  51.       /* background-color: greenyellow; */
  52.     }
  53.     /* 7.从指定位置（只取前三个），选择器盛下的所有元素 */
  54.     .container > .item:nth-child(-n + 3) {
  55.       /* background-color: brown; */
  56.     }
  57.     /* 8.从指定位置（取最后三个），选择器盛下的所有元素 */
  58.     .container > .item:nth-last-child(-n + 3) {
  59.       background-color: brown;
  60.     }
  61.     /* 9.取第8个，用倒数的方式更直观 */
  62.     .container > .item:nth-last-child(2) {
  63.       background-color: blue;
  64.     }
  65.   </style>
  66.   <body>
  67.     <div class="container">
  68.       <div class="item">1</div>
  69.       <div class="item">2</div>
  70.       <div class="item">3</div>
  71.       <div class="item">4</div>
  72.       <div class="item">5</div>
  73.       <div class="item">6</div>
  74.       <div class="item">7</div>
  75.       <div class="item">8</div>
  76.       <div class="item">9</div>
  77.     </div>
  78.   </body>
  79. </html>

以上代码可根据注释一个一个测试结果！p

实现注释中 8，9 效果预览：

ps:优先级相同时后面的代码效果会覆盖上面的代码效果，所以我这里 8 的蓝色覆盖了原先 8 的深红色。

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.   </head>
  8.   <style>
  9.     /* 使用九宫格来演示: grid布局实现 */
  10.     .container {
  11.       width: 300px;
  12.       height: 300px;
  13.       display: grid;
  14.       grid-template-columns: repeat(3, 1fr);
  15.       gap: 5px;
  16.     }
  17.     .item {
  18.       font-size: 2rem;
  19.       background-color: lightskyblue;
  20.       display: flex;
  21.       justify-content: center;
  22.       align-items: center;
  23.     }
  24.     /* 分组结构伪类分二步 
  25.       1.元素按类型进行分组
  26.       2.在分组中根据索引进行注释
  27.     */
  28.     /* 在分组中匹配最后一个 */
  29.     .container div:last-of-type {
  30.       background-color: yellow;
  31.     }
  32.     /* 在分组中匹配任何一个 */
  33.     .container span:nth-of-type(3) {
  34.       background-color: violet;
  35.     }
  36.     /* 在分组中匹配前3个 */
  37.     .container span:nth-of-type(-n + 3) {
  38.       background-color: blue;
  39.     }
  40.     /* 在分组中匹配最后2个 */
  41.     .container span:nth-last-of-type(-n + 2) {
  42.       background-color: red;
  43.     }
  44.   </style>
  45.   <body>
  46.     <div class="container">
  47.       <div class="item">1</div>
  48.       <div class="item">2</div>
  49.       <div class="item">3</div>
  50.       <span class="item">4</span>
  51.       <span class="item">5</span>
  52.       <span class="item">6</span>
  53.       <span class="item">7</span>
  54.       <span class="item">8</span>
  55.       <span class="item">9</span>
  56.     </div>
  57.   </body>
  58. </html>

效果预览：

四、伪类与伪元素

伪类 描述
:target 必须配合 id ，实现锚点操作。
:focus 选择器选取当前具有焦点的元素
:not() 选择器选取除了指定元素以外的所有元素
伪元素 描述
::before 选择器向选定的元素之前插入内容，使用 content 属性来指定要插入的内容。
::after 选择器向选定的元素之后插入内容，使用 content 属性来指定要插入的内容。
::selection 选择器匹配元素中被用户选中或处于高亮状态的部分，只可以应用于少数的 CSS 属性：color, background, cursor,和 outline。

实例代码：

  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.       #login-form {
  9.         display: none;
  10.       }
  11.       /* :target: 必须配合id，实现锚点操作 */
  12.       /* 当前#login-form的表单元素被a的锚点激活的时候执行 */
  13.       #login-form:target {
  14.         display: block;
  15.       }
  16.       /* :focus: 当前焦点的时候 */
  17.       input:focus {
  18.         background-color: #ccc;
  19.       }
  20.       /* ::selection 设置选中文本的前景色与背景色 */
  21.       input::selection {
  22.         color: white;
  23.         background-color: red;
  24.       }
  25.       /* :not(): 用于选择不满足条件元素 */
  26.       .list > li:not(:nth-of-type(3)) {
  27.         color: red;
  28.       }
  30.       /* ::before */
  31.       .list::before {
  32.         content: "小单车";
  33.         font-size: 1.5em;
  34.         color: blue;
  35.         border-bottom: 1px solid #000;
  36.       }
  37.       /* ::after */
  38.       .list::after {
  39.         content: "结算中。。。";
  40.         font-size: 1.1em;
  41.         color: red;
  42.       }
  43.       /* 伪元素前面双冒号，伪类前面单引号，伪元素选不中 */
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <!-- <a href="#login-form">我要登录：</a> -->
  48.     <button onclick="location='#login-form'">点击登录</button>
  49.     <form action="" method="post" id="login-form">
  50.       <label for="email">邮箱：</label>
  51.       <input type="email" name="email" id="email" />
  52.       <label for="email">密码：</label>
  53.       <input type="password" name="password" id="password" />
  54.       <button>登录</button>
  55.     </form>
  56.     <hr />
  57.     <ul class="list">
  58.       <li>item1</li>
  59.       <li>item2</li>
  60.       <li>item3</li>
  61.       <li>item4</li>
  62.     </ul>
  63.   </body>
  64. </html>

效果预览：

ps:点击登录后显示表单。

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