简体中文（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 简单选择器、上下文选择器、结构伪类选择器等使用总结

JKY辉哥
JKY辉哥原创
2020年06月16日 21:55:53497浏览

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.       /* 使用九宫格来演示: 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: lightseagreen;
  28.       }
  29.       /* 类选择器: 对应着html标签中的class属性 */
  30.       .item {
  31.         border: 1px solid #000;
  32.       }
  34.       /* 多个类复合应用 */
  35.       .item.center {
  36.         background-color: lightgreen;
  37.       }
  38.       /* id选择器 */
  39.       .item#first {
  40.         background-color: lightpink;
  41.       }
  43.       /* 层叠样式表， 相同元素，后面追加的样式会覆盖前面的样式 */
  44.       *#first {
  45.         background-color: yellow;
  46.       }
  48.       #first.item {
  49.         background-color: tomato;
  50.       }
  52.       /* * :属于元素级别
  53.       元素 < class < id */
  54.       /* id,class可以添加到任何元素上，所以可以省略 */
  56.       /* id 选择器的应用场景目前只有二种场景： 表单元素， 锚点 */
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <!-- .container>.item{$}*9  快速生成-->
  62.     <div class="container">
  63.       <div class="item" id="first">1</div>
  64.       <div class="item">2</div>
  65.       <div class="item">3</div>
  66.       <div class="item center">4</div>
  67.       <div class="item">5</div>
  68.       <div class="item">6</div>
  69.       <div class="item">7</div>
  70.       <div class="item">8</div>
  71.       <div class="item">9</div>
  72.     </div>
  73.   </body>
  74. </html>

运行结果：
简单选择器

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.       /* 使用九宫格来演示: 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.       /* 1.后代选择器 */
  25.       .container div {
  26.         border: 1px solid #000;
  27.       }
  29.       /* 2. 父子选择器 */
  30.       body > div {
  31.         border: 5px solid coral;
  32.       }
  34.       /* 3.同级相邻选择器 */
  35.       .item.center + .item {
  36.         background-color: lightgreen;
  37.       }
  39.       /* 4.同级所有选择器 */
  40.       .item.center ~ .item {
  41.         background-color: lightsalmon;
  42.       }
  43.     </style>
  44.   </head>
  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.       <div class="item">4</div>
  51.       <div class="item center">5</div>
  52.       <div class="item">6</div>
  53.       <div class="item">7</div>
  54.       <div class="item">8</div>
  55.       <div class="item">9</div>
  56.     </div>
  57.   </body>
  58. </html>

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.       /* 使用九宫格来演示: grid布局实现 */
  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: lightskyblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  24.       /* 匹配第一个子元素 */
  25.       .container > *:first-child {
  26.         /* background-color: wheat; */
  27.       }
  29.       .container > .item:first-child {
  30.         /* background-color: blue; */
  31.       }
  33.       /* 匹配最后一个子元素 */
  34.       .container > :last-child {
  35.         /* background-color: lightpink; */
  36.       }
  38.       /* 选第3个：索引是从1开始 */
  39.       .container > :nth-child(3) {
  40.         /* background-color: lightseagreen; */
  41.       }
  43.       /* 只选择偶数单元格 */
  44.       .container > :nth-child(2n) {
  45.         /* background-color: lightyellow; */
  46.       }
  47.       /* 偶数用even表示 */
  48.       .container > :nth-child(even) {
  49.         background-color: lightyellow;
  50.       }
  52.       /* 只选择奇数单元格 */
  53.       .container > :nth-child(2n-1) {
  54.         /* background-color: lightsalmon; */
  55.       }
  56.       /* 奇数: odd */
  57.       .container > :nth-child(odd) {
  58.         /* background-color: lightsalmon; */
  59.       }
  61.       /* 从指定位置(从第4个开始)，选择剩下的所有元素 */
  62.       .container > .item:nth-child(n + 4) {
  63.         background-color: lightseagreen;
  64.       }
  66.       /* 只取前三个 */
  67.       .container > .item:nth-child(-n + 3) {
  68.         background-color: magenta;
  69.       }
  71.       /* -0 + 3 = 3
  72.       -1 + 3 = 2
  73.       -2 + 3 = 1 */
  74.       /* 只选最后三个 */
  75.       .container > .item:nth-last-child(-n + 3) {
  76.         background-color: brown;
  77.       }
  79.       /* 取第8个，用倒数的方式更直观 */
  80.       .container > .item:nth-last-child(2) {
  81.         background-color: yellow;
  82.       }
  83.     </style>
  84.   </head>
  85.   <body>
  86.     <div class="container">
  87.       <div class="item">1</div>
  88.       <div class="item">2</div>
  89.       <div class="item">3</div>
  90.       <div class="item">4</div>
  91.       <div class="item">5</div>
  92.       <div class="item">6</div>
  93.       <div class="item">7</div>
  94.       <div class="item">8</div>
  95.       <div class="item">9</div>
  96.     </div>
  97.   </body>
  98. </html>

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.       /* 使用九宫格来演示: grid布局实现 */
  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: lightskyblue;
  20.         display: flex;
  21.         justify-content: center;
  22.         align-items: center;
  23.       }
  25.       /* 分组结构伪类分二步：
  26.       1. 元素按类型进行分组
  27.       2. 在分组中根据索引进行选择 */
  29.       /*选择最后一个 */
  30.       .container div:last-of-type {
  31.         background-color: violet;
  32.       }
  34.       /* 在分组中匹配任何一个,选择倒数第3个 */
  35.       .container div:nth-last-of-type(3) {
  36.         background-color: turquoise;
  37.       }
  39.       /* 前三个 */
  40.       .container div:nth-of-type(-n + 3) {
  41.         background-color: whitesmoke;
  42.       }
  44.       /* 最后四个 */
  45.       .container div:nth-last-of-type(-n + 4) {
  46.         background-color: yellowgreen;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <div class="container">
  52.       <div class="item">1</div>
  53.       <div class="item">2</div>
  54.       <div class="item">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>

运行结果：
结构伪类选择器

5. 伪类与伪元素

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

6.总结

  • 简单选择器优先级别:tag < class < id
  • :target: 必须 id 配合，实现锚点操作
  • :not(): 用于选择不满足条件元素
  • ::before 在之前
  • ::after 在之后
  • 伪元素前面是双冒号， 伪类前能是单冒号
  • CSS 选择器用法比较多，有点晕，需要多实践
上一条：04 选择器、结构伪类选择器、伪类与伪元素下一条：On Selectors
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多