简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >CSS之选择器篇

CSS之选择器篇

写代码的张先森
写代码的张先森原创
2020年06月16日 17:38:19753浏览

一.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.动手实践掌握会更好

上一条：php ODBC下一条：css选择器实战运用笔记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多