简体中文（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年06月22日 18:00:021010浏览

一、 简单选择器

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 个:
上一条：浮动元素高度坍塌产生的原因与解决方案下一条：背景控制的常用属性 精灵图原理及用法 阿里字体图标的完整引用流程
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多