简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 简述CSS选择器
Blogger Information
Blog 4
fans 2
comment 0
visits 8454
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
1011 people have browsed it

一、 简单选择器

data desc
元素（标签）选择器 直接使用元素（标签）名称
class（类）选择器 使用.加上 class（类）名称
id 选择器 使用#加上 id 名称
复合选择器 使用多个类或类和 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.       }
  23.       /* 元素（标签）选择器 */
  24.       body {
  25.         background-color: lightgrey; /*背景颜色*/
  26.       }
  27.       /* class（类）选择器 */
  28.       .item {
  29.         border: 1px dashed #f00; /*1px虚线红色边框*/
  30.       }
  31.       /* id选择器 */
  32.       #frist {
  33.         background-color: lightsalmon; /*背景颜色*/
  34.       }
  35.       /* 多个类复合选择器 */
  36.       .item.center {
  37.         background-color: lightpink; /*背景颜色*/
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="container">
  43.       <div class="item" id="frist">01</div>
  44.       <div class="item">02</div>
  45.       <div class="item">03</div>
  46.       <div class="item">04</div>
  47.       <div class="item center">05</div>
  48.       <div class="item">06</div>
  49.       <div class="item">07</div>
  50.       <div class="item">08</div>
  51.       <div class="item">09</div>
  52.     </div>
  53.   </body>
  54. </html>

  • 效果如下

简单选择器

二、 上下文选择器

data desc
后代选择器 用空格连接选择器
父子选择器 用>连接选择器
同级相邻选择器 用+连接选择器
同级所有选择器 用~连接选择器

  • 示例

  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.       }
  23.       /* 后代选择器 */
  24.       .container div {
  25.         border: 1px dashed #f00; /*1px虚线红色边框*/
  26.       }
  27.       /* 父子选择器 */
  28.       body > div {
  29.         background-color: #ff0; /*背景颜色*/
  30.         padding: 5px; /*内边距*/
  31.       }
  32.       /* 同级相邻选择器 */
  33.       .center + .item {
  34.         background-color: lightpink;
  35.       }
  36.       /* 同级所有选择器 */
  37.       .center ~ .item {
  38.         color: #fff; /*字体颜色*/
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <div class="container">
  44.       <div class="item">01</div>
  45.       <div class="item">02</div>
  46.       <div class="item">03</div>
  47.       <div class="item">04</div>
  48.       <div class="item center">05</div>
  49.       <div class="item">06</div>
  50.       <div class="item">07</div>
  51.       <div class="item">08</div>
  52.       <div class="item">09</div>
  53.     </div>
  54.   </body>
  55. </html>

  • 效果如下

上下文选择器

三、 结构伪类选择器

  • 不分组（不区分元素类型）

data desc
匹配第 1 个元素 :first-child
匹配最后 1 个元素 :last-child
匹配第 N 个元素 :nth-child(N)或:nth-last-child(N)
匹配所有的偶数元素 :nth-child(even)或:nth-child(2n)
匹配所有的奇数元素 :nth-child(odd)或:nth-child(2n-1)
匹配第 N 个位置开始的所有元素 :nth-child(n + N)
匹配前 N 个元素 :nth-child(-n + N)
匹配后 N 个元素 :nth-last-child(-n + 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.       /* 使用九宫格来演示: 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.       }
  23.       /* 匹配第1个子元素 */
  24.       .container > :first-child {
  25.         background-color: lightpink; /*背景色*/
  26.       }
  27.       /* 匹配最后1个子元素 */
  28.       .container > :last-child {
  29.         background-color: lightcoral; /*背景色*/
  30.       }
  31.       /* 匹配第5个子元素-1 */
  32.       .container > :nth-child(5) {
  33.         background-color: lightslategray; /*背景色*/
  34.       }
  35.       /* 匹配第5个子元素-2 */
  36.       .container > :nth-last-child(5) {
  37.         border-radius: 50px; /*设置圆角边框*/
  38.       }
  39.       /* 匹配所有的偶数子元素-1 */
  40.       .container > :nth-child(2n) {
  41.         color: blue; /*字体颜色*/
  42.       }
  43.       /* 匹配所有的偶数子元素-2 */
  44.       .container > :nth-child(even) {
  45.         font-size: 3rem; /*字体大小*/
  46.       }
  47.       /* 匹配所有的奇数子元素-1 */
  48.       .container > :nth-child(2n-1) {
  49.         color: yellow; /*字体颜色*/
  50.       }
  51.       /* 匹配所有的奇数子元素-2 */
  52.       .container > :nth-child(odd) {
  53.         font-size: 3rem; /*字体大小*/
  54.       }
  55.       /* 匹配指定位置(5)开始所有的子元素 */
  56.       .container > :nth-child(n + 5) {
  57.         background-color: black; /*背景色*/
  58.       }
  59.       /* 匹配前4个子元素 */
  60.       .container > :nth-child(-n + 4) {
  61.         border-radius: 50px; /*设置圆角边框*/
  62.       }
  63.       /* 匹配最后4个子元素 */
  64.       .container > :nth-last-child(-n + 4) {
  65.         border-radius: 50px; /*设置圆角边框*/
  66.       }
  67.     </style>
  68.   </head>
  69.   <body>
  70.     <div class="container">
  71.       <div class="item">01</div>
  72.       <div class="item">02</div>
  73.       <div class="item">03</div>
  74.       <div class="item">04</div>
  75.       <div class="item">05</div>
  76.       <div class="item">06</div>
  77.       <div class="item">07</div>
  78.       <div class="item">08</div>
  79.       <div class="item">09</div>
  80.     </div>
  81.   </body>
  82. </html>

  • 效果如下

结构伪类选择器-不分组

  • 分组

data desc
匹配分组中第 1 个元素 :first-of-type
匹配分组中最后 1 个元素 :last-of-type
匹配分组匹配第 N 个元素 :nth-of-type(N)
匹配分组中前 N 个元素 :nth-of-type(-n + N)
匹配分组 z 中后 N 个元素 :nth-last-of-type(-n + 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.       /* 使用九宫格来演示: 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.       }
  23.       /* span分组中匹配的最后一个元素 */
  24.       .container span:last-of-type {
  25.         background-color: brown; /*背景色*/
  26.       }
  27.       /* div分组中匹配的第一个元素 */
  28.       .container div:first-of-type {
  29.         background-color: lightpink; /*背景色*/
  30.       }
  31.       /* span分组中匹配第3个元素 */
  32.       .container span:nth-of-type(3) {
  33.         background-color: chocolate; /*背景色*/
  34.       }
  35.       /* span分组中匹配前3个元素 */
  36.       .container span:nth-of-type(-n + 3) {
  37.         color: white; /*字体颜色*/
  38.       }
  39.       /* span分组中匹配最后3个元素 */
  40.       .container span:nth-last-of-type(-n + 3) {
  41.         color: white; /*字体颜色*/
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="container">
  47.       <div class="item">01</div>
  48.       <div class="item">02</div>
  49.       <div class="item">03</div>
  50.       <span class="item">04</span>
  51.       <span class="item">05</span>
  52.       <span class="item">06</span>
  53.       <span class="item">07</span>
  54.       <span class="item">08</span>
  55.       <span class="item">09</span>
  56.     </div>
  57.   </body>
  58. </html>

  • 效果如下

结构伪类选择器-分组

四、 伪类与伪元素

data desc
锚点激活的时候触发 :target
获取焦点时触发 :focus
选中文本时触发 ::selection
选择不满足条件的元素 :not()
在某元素前面生成 ::before
在某元素后面生成 ::before

  • 示例

  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.       /* 当前#login-form表单元素被a标签的锚点激活的时候触发 */
  12.       #login-form:target {
  13.         display: block; /*显示元素*/
  14.       }
  15.       /* 获取焦点的时候 */
  16.       input:focus {
  17.         background-color: lightskyblue; /*背景色*/
  18.       }
  19.       /* 设置选中文本的前景色和背景色 */
  20.       ::selection {
  21.         color: white; /*字体颜色*/
  22.         background-color: maroon; /*背景色*/
  23.       }
  24.       /* 选择不满足条件的元素 */
  25.       ul > :not(:nth-of-type(3)) {
  26.         color: red; /*字体颜色*/
  27.       }
  28.       /* 在ul前面生成 */
  29.       ul::before {
  30.         content: "ul前面添加的内容"; /*内容*/
  31.         color: blue; /*字体颜色*/
  32.         font-size: 1.5rem; /*字体大小*/
  33.       }
  34.       /* 在ul后面生成 */
  35.       ul::after {
  36.         content: "ul后面添加的内容"; /*内容*/
  37.         color: yellow; /*字体颜色*/
  38.         font-size: 1.2rem; /*字体大小*/
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <!-- <a href="#login-form">我要登录</a> -->
  44.     <button onclick="location='#login-form'">点击登录</button>
  45.     <form action="" method="POST" id="login-form">
  46.       <label for="email">邮箱：</label>
  47.       <input type="email" name="email" id="email" />
  48.       <label for="password">密码：</label>
  49.       <input type="password" name="password" id="password" />
  50.       <button>登录</button>
  51.     </form>
  52.     <hr />
  53.     <ul>
  54.       <li>01</li>
  55.       <li>02</li>
  56.       <li>03</li>
  57.       <li>04</li>
  58.     </ul>
  59.   </body>
  60. </html>

  • 效果如下

    伪类与伪元素

小结

  • id 选择器目前应用的场景一般只有两种：表单、锚点
  • 复合选择器中间不能有空格，后代选择器中间有一个空格
  • 使用:nth-child(N)或:nth-last-child(N)等选择第 N 个元素时，css 索引是从 1 开始的
  • 伪类前面是 1 个:，伪元素前面是 2 个:
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！