Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS之选择器篇
Blogger Information
Blog 11
fans 0
comment 0
visits 12893
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之选择器篇
写代码的张先森
Original
762 people have browsed it

一.css的简单选择器

1.元素选择器 又叫标签选择器
写法如: div{} body{} p{} span{}
例：改变body的背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       border: 2px solid red;
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  27.     /* 1.元素选择器：标签选择器 */
  28.     body {
  29.       background-color: limegreen;
  30.     }
  31.   </style>
  32.   <body>
  33.     <!-- 简单选择器 -->
  34.     <div>
  35.       <div class="item">1</div>
  36.       <div class="item">2</div>
  37.       <div class="item">3</div>
  38.       <div class="item">4</div>
  39.       <div class="item">5</div>
  40.       <div class="item">6</div>
  41.       <div class="item">7</div>
  42.       <div class="item">8</div>
  43.       <div class="item">9</div>
  44.     </div>
  45.   </body>
  46. </html>

2.类选择器：对应着html标签中的class属性
写法如： .item{} .container{}
例：给全部class属性为item的div加背景颜色 写法

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       border: 2px solid red;
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 2.类选择器：对应着html标签中的class属性 */
  27.     .item {
  28.       background-color: rosybrown;
  29.     }
  30.   </style>
  31.   <body>
  32.     <!-- 简单选择器 -->
  33.     <div class="container">
  34.       <div class="item">1</div>
  35.       <div class="item">2</div>
  36.       <div class="item">3</div>
  37.       <div class="item">4</div>
  38.       <div class="item">5</div>
  39.       <div class="item">6</div>
  40.       <div class="item">7</div>
  41.       <div class="item">8</div>
  42.       <div class="item">9</div>
  43.     </div>
  44.   </body>
  45. </html>

3.类选择器之多个类复合应用
写法如： .item.center{}
例：想给第五个div单独添加一个背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       border: 2px solid red;
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 类选择器：对应着html标签中的class属性 */
  27.     .item {
  28.       background-color: rosybrown;
  29.     }
  30.     /*类选择器： 多个类复合应用 */
  31.     .item.center {
  32.       background-color: rgb(27, 210, 223);
  33.     }
  35.   </style>
  36.   <body>
  37.     <!-- 简单选择器 -->
  38.     <div class="container">
  39.       <div class="item" id="first">1</div>
  40.       <div class="item">2</div>
  41.       <div class="item">3</div>
  42.       <div class="item">4</div>
  43.       <div class="item center">5</div>
  44.       <div class="item">6</div>
  45.       <div class="item">7</div>
  46.       <div class="item">8</div>
  47.       <div class="item">9</div>
  48.     </div>
  49.   </body>
  50. </html>

4.id选择器 对应着html标签中的id属性
写法如：#first{}
例：改变第一个div的背景颜色
注意：1.层叠样式表 相同元素 后面追加的样式回覆盖前面的样式
2.*号 id，class可以添加到任何元素上 所以可以省略

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       border: 2px solid red;
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* id选择器 */
  27.     #first {
  28.       /* background-color: blue; */
  29.     }
  30.     *#first {
  31.       /* background-color: orangered; */
  32.     }
  33.     /* 层叠样式表 相同元素 后面追加的样式回覆盖前面的样式 */
  34.     /* * id，class可以添加到任何元素上 所以可以省略 */
  36.     /* id选择器的应用场景目前只有两种场景 表单 锚点 */
  37.   </style>
  38.   <body>
  39.     <!-- 简单选择器 -->
  40.     <div class="container">
  41.       <div class="item" id="first">1</div>
  42.       <div class="item">2</div>
  43.       <div class="item">3</div>
  44.       <div class="item">4</div>
  45.       <div class="item">5</div>
  46.       <div class="item">6</div>
  47.       <div class="item">7</div>
  48.       <div class="item">8</div>
  49.       <div class="item">9</div>
  50.     </div>
  51.   </body>
  52. </html>

二.CSS的上下文选择器

1.后代选择器 重点加空格
用法如：.container div{}
例：父级div下的所有子级div都加边框

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /*1. 后代选择器 空格*/
  27.     .container div {
  28.       border: 1px solid blue;
  29.     }
  30.   </style>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.       <div class="item center">5</div>
  38.       <div class="item">6</div>
  39.       <div class="item">7</div>
  40.       <div class="item">8</div>
  41.       <div class="item">9</div>
  42.     </div>
  43.   </body>
  44. </html>

2.父子选择器
写法如：body > div{}
例：给body下的子div的添加边框

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 2.父子选择器 */
  27.     body > div {
  28.       border: 1px solid green;
  29.     }
  30.   </style>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.       <div class="item center">5</div>
  38.       <div class="item">6</div>
  39.       <div class="item">7</div>
  40.       <div class="item">8</div>
  41.       <div class="item">9</div>
  42.     </div>
  43.   </body>
  44. </html>

3.同级相邻选择器
写法如：.item.center + .item{}
例：给第五个div后面相邻第六个div添加边框

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 3.同级相邻选择器 */
  27.     .item.center + .item {
  28.       border: 1px solid green;
  29.     }
  30.   </style>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.       <div class="item center">5</div>
  38.       <div class="item">6</div>
  39.       <div class="item">7</div>
  40.       <div class="item">8</div>
  41.       <div class="item">9</div>
  42.     </div>
  43.   </body>
  44. </html>

4.同级所有选择器
写法如：.item.center ~ .item{}
例：给第五个div后面所有div添加边框

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 4.同级所有选择器 */
  27.     .item.center ~ .item {
  28.       border: 1px solid green;
  29.     }
  30.   </style>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.       <div class="item center">5</div>
  38.       <div class="item">6</div>
  39.       <div class="item">7</div>
  40.       <div class="item">8</div>
  41.       <div class="item">9</div>
  42.     </div>
  43.   </body>
  44. </html>

三.CSS的结构伪类选择器（不分组）

1.匹配第一个子元素 :first-child
注：如果前面不加类名 默认递归方式给html所有第一个元素添加样式
写法如：.item:first-child{}
例：给第一个div添加背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 匹配第一个子元素 */
  27.     /* 注：如果不加类名.item 默认递归方式给html所有第一个元素添加样式 */
  28.     .item:first-child {
  29.       background-color: red;
  30.     }
  31.   </style>
  32.   <body>
  33.     <div class="container">
  34.       <div class="item">1</div>
  35.       <div class="item">2</div>
  36.       <div class="item">3</div>
  37.       <div class="item">4</div>
  38.       <div class="item">5</div>
  39.       <div class="item">6</div>
  40.       <div class="item">7</div>
  41.       <div class="item">8</div>
  42.       <div class="item">9</div>
  43.     </div>
  44.   </body>
  45. </html>

2.匹配最后一个子元素 :last-child
注：如果前面不加类名 默认递归方式给html所有最后一个元素添加样式
写法如：.item:last-child{}
例：给最后一个div添加背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 匹配最后一个子元素 */
  27.     .item:last-child {
  28.       background-color: red;
  29.     }
  31.   </style>
  32.   <body>
  33.     <div class="container">
  34.       <div class="item">1</div>
  35.       <div class="item">2</div>
  36.       <div class="item">3</div>
  37.       <div class="item">4</div>
  38.       <div class="item">5</div>
  39.       <div class="item">6</div>
  40.       <div class="item">7</div>
  41.       <div class="item">8</div>
  42.       <div class="item">9</div>
  43.     </div>
  44.   </body>
  45. </html>

3.匹配第几个子元素 :nth-child(n)
注：索引从1开始
写法如：.item:nth-child(1){}
例：给第三个div添加背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  28.     /* 选第三个 索引从1开始*/
  29.     .item:nth-child(3) {
  30.       background-color: red;
  31.     }
  33.   </style>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item">1</div>
  37.       <div class="item">2</div>
  38.       <div class="item">3</div>
  39.       <div class="item">4</div>
  40.       <div class="item">5</div>
  41.       <div class="item">6</div>
  42.       <div class="item">7</div>
  43.       <div class="item">8</div>
  44.       <div class="item">9</div>
  45.     </div>
  46.   </body>
  47. </html>

4.1.匹配偶数单元格 :nth-child(even) even为固定写法
注：索引从1开始
写法如：.item:nth-child(even){}
例：给偶数div添加背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  27.     /* 只选择偶数单元格 从1开始*/
  28.     .item:nth-child(even) {
  29.       background-color: red;
  30.     }
  32.   </style>
  33.   <body>
  34.     <div class="container">
  35.       <div class="item">1</div>
  36.       <div class="item">2</div>
  37.       <div class="item">3</div>
  38.       <div class="item">4</div>
  39.       <div class="item">5</div>
  40.       <div class="item">6</div>
  41.       <div class="item">7</div>
  42.       <div class="item">8</div>
  43.       <div class="item">9</div>
  44.     </div>
  45.   </body>
  46. </html>

4.2.匹配奇数单元格 :nth-child(odd) odd为固定写法
注：索引从1开始
写法如：.item:nth-child(odd){}
例：给奇数div添加背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  27.     /* 只选奇数单元格 从1开始*/
  28.     .item:nth-child(odd) {
  29.       background-color: red;
  30.     }
  32.   </style>
  33.   <body>
  34.     <div class="container">
  35.       <div class="item">1</div>
  36.       <div class="item">2</div>
  37.       <div class="item">3</div>
  38.       <div class="item">4</div>
  39.       <div class="item">5</div>
  40.       <div class="item">6</div>
  41.       <div class="item">7</div>
  42.       <div class="item">8</div>
  43.       <div class="item">9</div>
  44.     </div>
  45.   </body>
  46. </html>

4.3.从指定位置开始 选择剩下所有元素
注：索引从1开始 括号里位置不能变换
写法如：.item:nth-child(n + 4){} 4为指定位置 随便写 n为指定位置后所有元素 固定写法
例：给指定第四个div起所有div添加背景颜色（包含第四个）

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 从指定位置开始 选择剩下所有元素 */
  27.     .item:nth-child(n + 4) {
  28.       background-color: red;
  29.     }
  30.   </style>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.       <div class="item">5</div>
  38.       <div class="item">6</div>
  39.       <div class="item">7</div>
  40.       <div class="item">8</div>
  41.       <div class="item">9</div>
  42.     </div>
  43.   </body>
  44. </html>

4.4.只取前几个元素
注：索引从1开始 括号里位置不能变换
写法如：.item:nth-child(-n + 3){} 3为取几个 随便写 -n 固定写法
例：给前3个div添加背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 只取前三个 */
  27.     .item:nth-child(-n + 3) {
  28.       background-color: red;
  29.     }
  30.   </style>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.       <div class="item">5</div>
  38.       <div class="item">6</div>
  39.       <div class="item">7</div>
  40.       <div class="item">8</div>
  41.       <div class="item">9</div>
  42.     </div>
  43.   </body>
  44. </html>

5.只取最后几个 :nth-last-child(）
注：索引从1开始 括号里位置不能变换
写法如：.item:nth-last-child(-n + 3){} 3为取几个 随便写 -n 固定写法
例：给最后3个div添加背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 只取最后三个 */
  27.     .item:nth-last-child(-n + 3) {
  28.       background-color: red;
  29.     }
  30.   </style>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.       <div class="item">5</div>
  38.       <div class="item">6</div>
  39.       <div class="item">7</div>
  40.       <div class="item">8</div>
  41.       <div class="item">9</div>
  42.     </div>
  43.   </body>
  44. </html>

5.1.倒数第几个 :nth-last-child(）
注：索引从1开始 括号里位置不能变换
写法如：.item:nth-last-child(2){} 2为倒数第几个 随便写
例：给倒数第2个div添加背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 倒数第二个 */
  27.     .item:nth-last-child(2) {
  28.       background-color: red;
  29.     }
  30.   </style>
  31.   <body>
  32.     <div class="container">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.       <div class="item">5</div>
  38.       <div class="item">6</div>
  39.       <div class="item">7</div>
  40.       <div class="item">8</div>
  41.       <div class="item">9</div>
  42.     </div>
  43.   </body>
  44. </html>

四.CSS的结构伪类选择器（分组）

分组结构伪类分两步
注：1.元素安类型进行分组
注：2.在分组中根据索引进行选择

1.在分组中匹配最后一个 :last-of-type
注：前面一定要加要匹配的元素
写法如：.container span:last-of-type{} 匹配.container 下 span元素的最后一个
例：给.container 下 最后一个span添加背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 分组结构伪类分两步 */
  27.     /* 1.元素安类型进行分组
  28.        2.在分组中根据索引进行选择 */
  30.     /* 在分组中匹配最后一个 */
  31.     .container span:last-of-type {
  32.       background-color: maroon;
  33.     }
  35.   </style>
  36.   <body>
  37.     <div class="container">
  38.       <div class="item">1</div>
  39.       <div class="item">2</div>
  40.       <div class="item">3</div>
  41.       <span class="item">4</span>
  42.       <span class="item">5</span>
  43.       <span class="item">6</span>
  44.       <span class="item">7</span>
  45.       <span class="item">8</span>
  46.       <span class="item">9</span>
  47.     </div>
  48.   </body>
  49. </html>

2.在分组中匹配任何一个 :nth-of-type()
注：前面一定要加要匹配的元素
写法如：.container span:nth-of-type(3){} 匹配.container 下 span元素的第三个
例：给.container 下 第三个span添加背景颜色

  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.     .container {
  10.       width: 400px;
  11.       height: 400px;
  12.       /* border: 1px solid black; */
  13.     }
  14.     .container .item {
  15.       width: 100px;
  16.       height: 100px;
  17.       /* border: 2px solid red; */
  18.       float: left;
  19.       text-align: center;
  20.       line-height: 100px;
  21.       font-size: 20px;
  22.       font-weight: bold;
  23.       margin-left: 5px;
  24.       margin-top: 5px;
  25.     }
  26.     /* 分组结构伪类分两步 */
  27.     /* 1.元素安类型进行分组
  28.        2.在分组中根据索引进行选择 */
  29.     /* 在分组中匹配任何一个 */
  30.     .container span:nth-of-type(3) {
  31.       background-color: maroon;
  32.     }
  33.   </style>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item">1</div>
  37.       <div class="item">2</div>
  38.       <div class="item">3</div>
  39.       <span class="item">4</span>
  40.       <span class="item">5</span>
  41.       <span class="item">6</span>
  42.       <span class="item">7</span>
  43.       <span class="item">8</span>
  44.       <span class="item">9</span>
  45.     </div>
  46.   </body>
  47. </html>

其他匹配方式类似 在 :nth-of-type()括号中添加匹配条件即可

  1. 如： /* 前三个 */
  2.     /* .container span:nth-of-type(-n + 3) {
  3.       background-color: maroon;
  4.     } */
  6.     /* 最后两个 */
  7.     /* .container span:last-of-type(-n + 2) {
  8.       background-color: maroon;
  9.     } */

五.CSS伪类和伪元素

1.:target 选择器可用于选取当前活动的目标元素。
注：必须id配合 实现锚点操作
例：点击我要登录出现输入框demo

  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.     #login-form {
  10.       display: none;
  11.     }
  12.     /* :target  :必须id配合 实现锚点操作 */
  13.     /* 当前login-form的表单元素被a的锚点激活的时候执行 */
  14.     #login-form:target {
  15.       display: block;
  16.     }
  17.     /* 伪元素前面是双冒号 伪类前是单冒号 */
  18.   </style>
  19.   <body>
  20.     <a href="#login-form"">我要登录</a>
  21.     <form action="" method="POST" id="login-form">
  22.       <label for="">邮箱</label>
  23.       <input type="email" name="email" id="email" />
  24.       <label for="">密码</label>
  25.       <input type="password" name="password" id="password" />
  26.       <button>登录</button>
  27.     </form>
  28.   </body>
  29. </html>

2.:focus 选择器当获取焦点的时候
例：点击输入框获取焦点时改变输入框样式

  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>
  10.     /* :focus 当获取交点的时候 */
  11.     input:focus {
  12.       background-color: chocolate;
  13.     }
  15.   </style>
  16.   <body>
  17.     <!-- <a href="#login-form"">我要登录</a> -->
  18.     <form action="" method="POST" id="login-form">
  19.       <label for="">邮箱</label>
  20.       <input type="email" name="email" id="email" />
  21.       <label for="">密码</label>
  22.       <input type="password" name="password" id="password" />
  23.       <button>登录</button>
  24.     </form>
  25.   </body>
  26. </html>

其他类似方法有 自己练习一下

  1.   input::selection {}  设置选中文本的前景色和背景色
  3.   :not(条件)  用于选择不满足条件元素 
  5.   ::berore 在元素前创建伪元素
  7.   ::after  在元素后创建伪元素

小结

1.元素选择器基本用法都是在设置元素样式是用到
2.动手实践掌握会更好

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