Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 三大种类选择器与伪类选择器还有伪元素的演示
Blogger Information
Blog 8
fans 1
comment 0
visits 8880
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
三大种类选择器与伪类选择器还有伪元素的演示
BigPig
Original
1296 people have browsed it

三大种类选择器

简单选择器

1.元素选择器（也叫做标签选择器）
元素选择器是由元素来做选择器，然后去更改该标签的样式的
例如：

  1. <style>
  2.     body{
  3.     background-color:red;
  4.     }
  5. </style>

是通过元素选择器将body的背景改为红色。

2.类选择器
类选择器是对应着HTML标签中的class属性的

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .bgc {
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: yellow;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div class="bgc"></div>
  19. </body>
  21. </html>

上面是通过类选择器来将body中的div标签绑定，然后将div的宽高设置为200px，将背景颜色设置为黄色，效果图如下：

3.id选择器
id选择器是对应着HTML标签中的id属性的
通过标签的id属性，将其与样式表中的id相绑定，然后更改其样式，代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         #bgc {
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: yellow;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div id="bgc"></div>
  19. </body>
  21. </html>

总的来说，id选择器与类选择器的区别就是在于一个是以.或着#来声明是类选择器还是id选择器，现在id选择器很少用，更大部分还是推荐使用类选择器。

上下文选择器

为了更好的举例说明，这里我们将会用到grid布局来做九宫格来演示。
上下文选择器一共是有四种类型的选择器分别是

1.后代选择器
2.父子选择器
3.同级相邻选择器
4.同级所有选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title></title>
  8.   <style>
  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.      /* 1. 后代选择器: 空格 */
  25.     .container div {
  26.       border: 1px solid #000;
  27.     }
  28.     /*选择类属性值为.container下面的所有子级div添加1px黑色实线的边框*/
  30.     /* 2. 父子选择器: > */
  31.     body>div {
  32.       background-color: yellow;
  33.     }
  34.     /*选择body标签下的第一个div，并且将背景色改为黄色*/
  36.     /* 3. 同级相邻选择器 */
  37.     .item.center+.item {
  38.       background-color: lightgreen;
  39.     }
  40.     /*选中有.item.center复式类属性的div标签，将它下一个相邻的div背景颜色改为浅绿色*/
  42.     /* 4. 同级所有选择器 */
  43.     .item.center~.item {
  44.       background-color: lightsalmon;
  45.     }
  46.     /**选中有.item.center复式类属性的div标签，将它以下的所有同级兄弟div的背景色改为浅珊瑚色*/
  47.   </style>
  48. </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 center">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>
  64. </html>

效果图如下：

伪类选择器

伪类选择器（不分组）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title></title>
  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.         }
  18.         .item {
  19.             font-size: 2rem;
  20.             background-color: lightskyblue;
  21.             display: flex;
  22.             justify-content: center;
  23.             align-items: center;
  24.         }
  26.         /* first-child是匹配.container下面的第一个子元素 */
  27.         .container>*:first-child {
  28.             background-color: lightgreen;
  29.         }
  31.         /* last-child是匹配.container下面的最后一个子元素 */
  32.         .container> :last-child {
  33.             background-color: lightpink;
  34.         }
  36.         /* :nth-child()是匹配任意一共子元素，值有后面括号中的参数决定 */
  37.         .container> :nth-child(3) {
  38.             background-color: limegreen;
  39.         }
  40.     </style>
  41. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">1</div>
  46.         <div class="item">2</div>
  47.         <div class="item">3</div>
  48.         <div class="item">4</div>
  49.         <div class="item">5</div>
  50.         <div class="item">6</div>
  51.         <div class="item">7</div>
  52.         <div class="item">8</div>
  53.         <div class="item">9</div>
  54.     </div>
  55. </body>
  57. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>结构伪类选择器: 不分组(不区分元素类型)</title>
  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.         }
  18.         .item {
  19.             font-size: 2rem;
  20.             background-color: lightskyblue;
  21.             display: flex;
  22.             justify-content: center;
  23.             align-items: center;
  24.         }
  26.         /* 选择排序为偶数的单元格，并为其单元格添加浅绿色背景。偶数用even表示 */
  27.         .container> :nth-child(even) {
  28.             background-color: limegreen;
  29.         }
  31.         /* 选择排序为奇数数的单元格，并为其单元格添加珊瑚色背景。奇数: odd */
  32.         .container> :nth-child(odd) {
  33.             background-color: salmon;
  34.         }
  35.     </style>
  36. </head>
  38. <body>
  39.     <div class="container">
  40.         <div class="item">1</div>
  41.         <div class="item">2</div>
  42.         <div class="item">3</div>
  43.         <div class="item">4</div>
  44.         <div class="item">5</div>
  45.         <div class="item">6</div>
  46.         <div class="item">7</div>
  47.         <div class="item">8</div>
  48.         <div class="item">9</div>
  49.     </div>
  50. </body>
  52. </html>

伪类选择器（分组）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>结构伪类选择器: 分组(不区分元素类型)</title>
  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.         }
  18.         .item {
  19.             font-size: 2rem;
  20.             background-color: lightskyblue;
  21.             display: flex;
  22.             justify-content: center;
  23.             align-items: center;
  24.         }
  26.         /* 分组结构伪类分二步：
  27.       1. 元素按类型进行分组
  28.       2. 在分组中根据索引进行选择 */
  29.         /* 选中div分组的最后一个div，将其背景颜色改为紫色 */
  30.         .container div:last-of-type {
  31.             background-color: violet;
  32.         }
  34.         /* 在sppan分组中选择第二个span并且将其颜色改为黄色  */
  35.         .container span:nth-of-type(2) {
  36.             background-color: yellow;
  37.         }
  39.         /* 前选择div的前三个并将背景颜色改为红色 */
  40.         .container div:nth-of-type(-n + 3) {
  41.             background-color: red;
  42.         }
  44.         /* 选择span的最后二个，将背景颜色改为紫色 */
  45.         .container span:nth-last-of-type(-n + 2) {
  46.             background-color: violet;
  47.         }
  48.     </style>
  49. </head>
  51. <body>
  52.     <div class="container">
  53.         <div class="item">1</div>
  54.         <div class="item">2</div>
  55.         <div class="item">3</div>
  57.         <div class="item">4</div>
  58.         <span class="item">5</span>
  59.         <span class="item">6</span>
  60.         <span class="item">7</span>
  61.         <span class="item">8</span>
  62.         <span class="item">9</span>
  63.     </div>
  64. </body>
  66. </html>

target, :not, :before, :after, :focus的举例演示

target

target伪类是用于配合id实现锚点操作，先写一个表单，然后用一个a链接与表单绑定id，当target伪类被a链接点击激活时，显示表单。没有激活时隐藏表单，代码如下：

  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:target {
  12.         display: block;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <!-- <a href="#login-form">我要登录:</a> -->
  18.     <button onclick="location='#login-form'">点击登录</button>
  19.     <form action="" method="post" id="login-form">
  20.       <label for="email">邮箱:</label>
  21.       <input type="email" name="email" id="email" />
  22.       <label for="password">密码:</label>
  23.       <input type="password" name="password" id="password" />
  24.       <button>登录</button>
  25.     </form>
  26.   </body>
  27. </html>

表单没有显示之前：

表单显示之后：

:not, :before, :after, :focus

not伪类的作用是排除不满足条件的元素
before是在元素前添加内容或者样式
after伪元素的作品用是在元素结尾添加一些样式
focus是在所绑定的表单获取焦点时可以为其设置样式
演示代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>伪类与伪元素</title>
  8.   <style>
  9.     /* 当前文本框获取焦点的时候 */
  10.     input:focus {
  11.       background-color: yellow;
  12.     }
  14.     /* class值为list下的子级标签中第三个不满足条件除外，其他都为其添加样式 */
  15.     .list> :not(:nth-of-type(3)) {
  16.       color: yellow;
  17.     }
  19.     /*在class为list的元素前添加购物车，无法选中，并且其添加样式 */
  20.     .list::before {
  21.       content: "购物车";
  22.       color: blue;
  23.       font-size: 1.5rem;
  24.       border-bottom: 1px solid #000;
  25.     }
  27.     /*在class为list的元素前添加结算，无法选中，并且其添加样式 */
  28.     .list::after {
  29.       content: "结算中...";
  30.       color: red;
  31.       font-size: 1.1rem;
  32.     }
  34.     /* 伪元素前面是双冒号， 伪类前能是单冒号 */
  35.   </style>
  36. </head>
  38. <body>
  39.   <form>
  40.     <input type="text">
  41.   </form>
  42.   <ul class="list">
  43.     <li>item1</li>
  44.     <li>item2</li>
  45.     <li>item3</li>
  46.     <li>item4</li>
  47.   </ul>
  48. </body>
  50. </html>

效果图：

以上就是 target, :not, :before, :after, :focus的所有演示！

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