search

博客列表 >三大种类选择器与伪类选择器还有伪元素的演示

三大种类选择器与伪类选择器还有伪元素的演示

BigPig
BigPig原创
2020年06月20日 19:08:351294浏览

三大种类选择器

简单选择器

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的所有演示！

上一条：6-17作业！盒模型及大小计算方式和对齐方式下一条：盒模型常用属性及元素大小计算，定位元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多