Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS 简单选择器、上下文选择器、结构伪类选择器等使用总结
Blogger Information
Blog 14
fans 0
comment 2
visits 12670
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 简单选择器、上下文选择器、结构伪类选择器等使用总结
JKY辉哥
Original
506 people have browsed it

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 选择器用法比较多，有点晕，需要多实践
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