search

博客列表 >了解 CSS 选择器：简单选择器、上下文选择器、结构伪类选择器、伪类和伪元素

了解 CSS 选择器：简单选择器、上下文选择器、结构伪类选择器、伪类和伪元素

忠于原味
忠于原味原创
2020年06月17日 00:30:01602浏览

一、简单选择器

选择器名 符号 描述
元素选择器 某个 HTML 元素 比如 p、h1、em、a，甚至可以是 html 本身
类选择器 . 对应着 html 标签中的 class 属性
id 选择器 # 对应着 html 标签中的 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.       }
  24.       /* 简单选择器 */
  25.       /* 元素选择器: 标签选择器 */
  26.       body {
  27.         background-color: lightcyan;
  28.       }
  29.       /* 类选择器: 对应着html标签中的class属性 */
  30.       .item {
  31.         border: 1px solid #000;
  32.       }
  33.       /* 多个类复合应用 */
  34.       .item.center {
  35.         background-color: lightgreen;
  36.       }
  37.       /* id选择器 */
  38.       .item#first {
  39.         background-color: lightpink;
  40.       }
  42.       /* 层叠样式表， 相同元素，后面追加的样式会覆盖前面的样式 */
  43.       *#first {
  44.         background-color: yellow;
  45.       }
  47.       #first.item {
  48.         background-color: red;
  49.       }
  51.       /* * :属于元素级别
  52.       元素 < class < id */
  53.       /* id,class可以添加到任何元素上，所以可以省略 */
  55.       /* id 选择器的应用场景目前只有二种场景： 表单元素， 锚点 */
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <div class="container">
  60.       <div class="item" id="first">1</div>
  61.       <div class="item">2</div>
  62.       <div class="item">3</div>
  63.       <div class="item">4</div>
  64.       <div class="item center">5</div>
  65.       <div class="item">6</div>
  66.       <div class="item">7</div>
  67.       <div class="item">8</div>
  68.       <div class="item">9</div>
  69.     </div>
  70.   </body>
  71. </html>

效果预览：

二、上下文选择器

选择器名 符号 描述
后代选择器 空格 标签 1 标签 2，获取到标签 1 的所有叫标签 2 的元素
父子选择器 > 标签 1 > 标签 2，标签 2 必须是标签 1 的子元素。与其他常规的上下文选择符不同，这个选择符中的标签 1 不能使标签 2 的父元素之外的其他祖先元素
同级(相邻)兄弟选择器 + 标签 1 + 标签 2，标签 2 必须紧跟在其同胞标签 1 的后面
同级所有选择器 ~ 标签 1 ~ 标签 2，标签 2 必须在（不一定紧挨着）其同胞标签 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.   </head>
  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.     }
  17.     .item {
  18.       font-size: 2rem;
  19.       background-color: lightskyblue;
  20.       display: flex;
  21.       justify-content: center;
  22.       align-items: center;
  23.     }
  25.     /* 1.后代选择器 ： 空格 */
  26.     .container div {
  27.       border: 1px solid red;
  28.     }
  29.     /* 2.父子选择器： >  */
  30.     body > div {
  31.       border: 5px solid blue;
  32.     }
  33.     /* 3.同级相邻(兄弟)选择器 */
  34.     .item.center + .item {
  35.       border: 5px solid green;
  36.     }
  37.     /* 4.同级所有选择器 */
  38.     .item.next ~ .item {
  39.       border: 5px solid yellow;
  40.     }
  41.   </style>
  42.   <body>
  43.     <div class="container">
  44.       <div class="item">1</div>
  45.       <div class="item">2</div>
  46.       <div class="item">3</div>
  47.       <div class="item">4</div>
  48.       <div class="item center">5</div>
  49.       <div class="item next">6</div>
  50.       <div class="item">7</div>
  51.       <div class="item">8</div>
  52.       <div class="item">9</div>
  53.     </div>
  54.   </body>
  55. </html>

效果预览：

三、结构伪类选择器

不分组(不区分元素类型) 分组（区分元素类型）
:first-child :first-of-type
:last-child :last-of-type
:nth-child(n) :nth-of-type()
:nth-last-child(n) :nth-last-of-tyle()

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.   </head>
  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.     }
  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 > *:first-child {
  26.       /* background-color: lightgreen; */
  27.     }
  28.     .container > .item:first-child {
  29.       /* background-color: blue; */
  30.     }
  31.     /* 2.匹配最后一个子元素 */
  32.     .container > :last-child {
  33.       /* background-color: blueviolet; */
  34.     }
  35.     /* 3.选第三个:索引从1开始 */
  36.     .container > :nth-child(3) {
  37.       /* background-color: lightgreen; */
  38.     }
  40.     /* n从0开始计算 */
  41.     /* 4.只选择偶数单元格(4n)或(even) */
  42.     .container > :nth-child(2n) {
  43.       /* background-color: blue;  */
  44.     }
  45.     /* 5.只选择奇数单元格(2n + 1)或(2n - 1)或(odd) */
  46.     .container > :nth-child(odd) {
  47.       /* background-color: green; */
  48.     }
  49.     /* 6.从指定位置（从第4个开始），选择器盛下的所有元素 */
  50.     .container > .item:nth-child(n + 4) {
  51.       /* background-color: greenyellow; */
  52.     }
  53.     /* 7.从指定位置（只取前三个），选择器盛下的所有元素 */
  54.     .container > .item:nth-child(-n + 3) {
  55.       /* background-color: brown; */
  56.     }
  57.     /* 8.从指定位置（取最后三个），选择器盛下的所有元素 */
  58.     .container > .item:nth-last-child(-n + 3) {
  59.       background-color: brown;
  60.     }
  61.     /* 9.取第8个，用倒数的方式更直观 */
  62.     .container > .item:nth-last-child(2) {
  63.       background-color: blue;
  64.     }
  65.   </style>
  66.   <body>
  67.     <div class="container">
  68.       <div class="item">1</div>
  69.       <div class="item">2</div>
  70.       <div class="item">3</div>
  71.       <div class="item">4</div>
  72.       <div class="item">5</div>
  73.       <div class="item">6</div>
  74.       <div class="item">7</div>
  75.       <div class="item">8</div>
  76.       <div class="item">9</div>
  77.     </div>
  78.   </body>
  79. </html>

以上代码可根据注释一个一个测试结果！p

实现注释中 8，9 效果预览：

ps:优先级相同时后面的代码效果会覆盖上面的代码效果，所以我这里 8 的蓝色覆盖了原先 8 的深红色。

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.   </head>
  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.     }
  17.     .item {
  18.       font-size: 2rem;
  19.       background-color: lightskyblue;
  20.       display: flex;
  21.       justify-content: center;
  22.       align-items: center;
  23.     }
  24.     /* 分组结构伪类分二步 
  25.       1.元素按类型进行分组
  26.       2.在分组中根据索引进行注释
  27.     */
  28.     /* 在分组中匹配最后一个 */
  29.     .container div:last-of-type {
  30.       background-color: yellow;
  31.     }
  32.     /* 在分组中匹配任何一个 */
  33.     .container span:nth-of-type(3) {
  34.       background-color: violet;
  35.     }
  36.     /* 在分组中匹配前3个 */
  37.     .container span:nth-of-type(-n + 3) {
  38.       background-color: blue;
  39.     }
  40.     /* 在分组中匹配最后2个 */
  41.     .container span:nth-last-of-type(-n + 2) {
  42.       background-color: red;
  43.     }
  44.   </style>
  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.       <span class="item">4</span>
  51.       <span class="item">5</span>
  52.       <span class="item">6</span>
  53.       <span class="item">7</span>
  54.       <span class="item">8</span>
  55.       <span class="item">9</span>
  56.     </div>
  57.   </body>
  58. </html>

效果预览：

四、伪类与伪元素

伪类 描述
:target 必须配合 id ，实现锚点操作。
:focus 选择器选取当前具有焦点的元素
:not() 选择器选取除了指定元素以外的所有元素
伪元素 描述
::before 选择器向选定的元素之前插入内容，使用 content 属性来指定要插入的内容。
::after 选择器向选定的元素之后插入内容，使用 content 属性来指定要插入的内容。
::selection 选择器匹配元素中被用户选中或处于高亮状态的部分，只可以应用于少数的 CSS 属性：color, background, cursor,和 outline。

实例代码：

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

效果预览：

ps:点击登录后显示表单。

上一条：表格和用户注册表单的实现下一条：一个实用的表单元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多