Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS的常用选择器
Blogger Information
Blog 40
fans 2
comment 1
visits 38914
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
680 people have browsed it

1.CSS简单基本选择器

  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>基本CSS选择器</title>
  7.     <style>
  8.         body {
  9.             background-color: lightcyan;
  10.         }
  11.         /* 类选择器: 根据元素的class值来去选择,将其改变样式 */
  12.         .container {
  13.             width: 300px;
  14.             height: 300px;
  15.             display: grid; /* 网格布局 */
  16.             grid-template-columns: 1fr 1fr 1fr; /* 有几列? 每列有多大 如: 我有3列 每列1ft */
  17.             grid-template-rows: 60px 60px 60px; /* 有几行? 每行有多大 如: 我有3行 每行16px */
  18.             gap: 10px; /* .container下面的元素 gap:行和列为10px cloums-gap:列间距; rows-gap:行间距 */
  19.         }
  20.         /* 类选择器: 选择class为item的元素,将其改变以下样式 */
  21.         .item {
  22.             background-color: #CCC;
  23.             font-size: 2rem;
  24.             display: flex; /* 弹性布局 */
  25.             justify-content: center; /* 垂直居中 */
  26.             align-items: center; /* 左右居中 */
  27.         }
  28.         /* 多个类选择器: 一个元素只能有一个class属性,但class可以有多个值例如: clsss="value1 value2 n..." */
  29.         .item.center {
  30.             background-color: lightgreen;
  31.         }
  32.         /* id选择器: 选择id属性值为first的元素,将其改变样式 */
  33.         #first {
  34.             background-color: lime;
  35.         }
  36.         /* id,class可以添加到任何元素上,前面的元素限定符默认就是*, 所以可以省略 */
  37.         /* 选择div的id属性为first值的元素 */
  38.         div#first {
  39.             background-color: #ccc;
  40.         }
  41.         /* 类选择器的优先级比元素选择器优先级大,所以会覆盖元素选择器设置的样式 */
  42.         .item#first {
  43.             background-color: red;
  44.         }
  46.         /* id选择器比类选择器和元素选择器要大, 所以会覆盖类选择器或元素选择器的样式 */
  47.         #first.item {
  48.             background-color: violet;
  49.         }
  51.         /* 属性选择器: 属性选择器优先级比id,class,元素选择器要底 */
  52.         .item[name='tom'] {
  53.             background-color: #000;
  54.         }
  56.         .item[title='php']{
  57.             background-color: red;
  58.         }
  60.         /* 多组选择器:可以按照id,class,元素,属性选择器选择多少用逗号分隔开 */
  61.         /* 下面将id为first, class为item center, title属性为hello world 设置为绿色*/
  62.         *#first, .item.center, .item[title="hello world"] {
  63.             background-color: green
  64.         }
  66.     </style>
  67. </head>
  68. <body>
  69.     <div class="container">
  70.         <div class="item" id="first" name="tom">1</div>
  71.         <div class="item" id="first" title="tag">2</div>
  72.         <div class="item" title="php">3</div>
  73.         <div class="item">4</div>
  74.         <div class="item center">5</div>
  75.         <div class="item" title="hello world">6</div>
  76.         <div class="item">7</div>
  77.         <div class="item">8</div>
  78.         <div class="item" title="hello world">9</div>
  79.     </div>
  80. </body>
  81. </html>
  • 效果图

上述总结:

  • 通过以下表格的总结内容可以看出非常简单使用css选择器
名称 选择器 实例 描述说明
类选择器 class <div class="container"></div> 选择所有container的元素, 将其写入css代码改变样式
多类选择器 class <div class="item center"></div> 一个元素只能有一个class属性,但class可以有多个值例如: clsss=”value1 value2 n…”
id选择器 id <div id="first"></div> 选择所有id属性值为first的元素, 在html文档中id值是可以重复的, 但不建议id值有重复
元素选择器 element <p></p> <div></div> 根据标签名称来去选择 如: 标签名 {}
id选择器的优先级 #first <div id="first"></div> id选择器比类选择器和元素选择器要大, 所以会覆盖类选择器或元素选择器的样式
属性选择器 .item[属性名=’属性值’] <div class="item" name="tom"></div> 属性选择器优先级比id,class,element选择器要底
内联 style <div style="background-color: coral;"></div> 所有标签的style属性上的css优先级是最高的,会覆盖class,id,element,attribute选择器
群组选择器 #first, .item.center, .item[title=”hello world” #first, .item.center, .item[title="hello world"] {} 下面用逗号分隔开将id为first, class为item center, title属性为hello world 选中

2. CSS的上下文选择器

  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.         body {
  9.             background-color: #f2f2f2;
  10.         }
  11.         .container {
  12.             width: 300px;
  13.             height: 300px;
  14.             display: grid;
  15.             grid-template-columns: 1fr 1fr 1fr;
  16.             margin-top: 50px;
  17.             margin-left: 50px;
  18.         }
  19.         .item {
  20.             font-size: 2rem;
  21.             display: flex;
  22.             justify-content: center;
  23.             align-items: center;
  24.             background-color: #ccc;
  25.         }
  27.         /* 后代选择器 */
  28.         .container div {
  29.             margin: 5px;
  30.             border: 4px dotted coral;
  31.         }
  33.         /* 父子选择器 */
  34.         body > div {
  35.             border: 3px dashed green;
  36.         }
  38.         /* 同级相邻选择器 */
  39.         .item.center + .item {
  40.             /* background-color: lightgreen; */
  41.         }
  43.         /* 同级所有选择器 */
  44.         .item.center ~ .item {
  45.             background-color: red;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <div class="container">
  51.         <div class="item">1</div>
  52.         <div class="item">2</div>
  53.         <div class="item">3</div>
  54.         <div class="item">4</div>
  55.         <div class="item center">5</div>
  56.         <div class="item">6</div>
  57.         <div class="item">7</div>
  58.         <div class="item">8</div>
  59.         <div class="item">9</div>
  60.     </div>
  61. </body> 
  62. </html>
  • 效果图

上述总结:

名称 实例 描述说明
后代选择器 .container div 选择container元素内所有的div元素
父子选择器 body > div 选择父级是body元素的所有div元素
同级相邻选择器 .item.center + .item 选择与第5个格子右相邻的格子,即后面的 “一个” 元素, 若然有多个就用 + 号连接 例如: .item.center + .item + .item + n...
同级所有选择器 .item.center ~ .item 选择第5个格子(不含第5个)后面的,有共同父级的所有兄弟元素即: 跟着第5个格子的元素全选中

3. 伪类选择器

  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.         * {margin: 0;padding: 0;}
  9.         body {
  10.             background-color: #ccc;
  11.         }
  13.         .container {
  14.             width: 300px;
  15.             height: 300px;
  16.             display: grid;
  17.             grid-template-columns: 1fr 1fr 1fr;
  18.             grid-template-rows: 2fr 2fr 2fr;
  19.             gap: 5px;
  20.             margin-top: 10px;
  21.             margin-left: 10px;
  22.         }
  23.         /* 类选择器 */
  24.         .item {
  25.             font-size: 2rem;
  26.             background-color: #fff;
  27.             display: flex;
  28.             /* 左右居中 */
  29.             justify-content: center;
  30.             /* 上下居中 */
  31.             align-items: center;
  32.         }
  34.         .container > :first-child {
  35.             background-color: lightcoral;
  36.         }
  38.         .container > :last-child {
  39.             background-color: lightsalmon;
  40.         }
  42.         .container > :nth-child(2) {
  43.             background-color: lightpink;
  44.         }
  46.         .container > :nth-child(even) {
  47.             background-color: red;
  48.         }
  50.         .container > :nth-child(odd) {
  51.             background-color: blue;
  52.         }
  54.         .container > :nth-child(-n + 4) {
  55.             background-color: orange;
  56.         }
  58.         .container > :nth-last-child(2) {
  59.             background-color: green;
  60.         }
  62.         .container > :nth-child(n + 6) {
  63.             background-color: lightyellow;
  64.         }
  66.     </style>
  67. </head>
  68. <body>
  69.     <div class="container">
  70.         <div class="item">1</div>
  71.         <div class="item">2</div>
  72.         <div class="item">3</div>
  73.         <div class="item">4</div>
  74.         <div class="item">5</div>
  75.         <div class="item">6</div>
  76.         <div class="item">7</div>
  77.         <div class="item">8</div>
  78.         <div class="item">9</div>
  79.     </div>
  80. </body> 
  81. </html>
  • 效果图

伪类选择器总结_1:

名称 实例 描述说明
:first-child .container > :first-child {} 为了防止递归, 应该在具体的父级元素上调用伪类,选择父级元素下面的第一个子元素
:last-child .container > :last-child {} 选择父级元素下面的最后一个子元素
:nth-child() .container > :nth-child(2) {} 在父级元素中匹配任意一个子元素,索引是从1开始计算 (1就是匹配第一个, 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.     <style>
  8.         * {margin: 0;padding: 0;}
  9.         body {
  10.             background-color: #ccc;
  11.         }
  13.         .container {
  14.             width: 300px;
  15.             height: 300px;
  16.             display: grid;
  17.             grid-template-columns: 1fr 1fr 1fr;
  18.             grid-template-rows: 2fr 2fr 2fr;
  19.             gap: 5px;
  20.             margin-top: 10px;
  21.             margin-left: 10px;
  22.         }
  23.         .container span,
  24.         .container div {
  25.             display: flex;
  26.             font-weight: bolder;
  27.             justify-content: center;
  28.             align-items: center;
  29.             border: 2px dashed;
  30.         }
  32.         .container > span:first-of-type {
  33.             background-color: red;
  34.         }
  36.         .container > span:last-of-type {
  37.             background-color: blue;
  38.         }
  40.         .container > div:nth-of-type(-n + 2) {
  41.             background-color: lightcoral;
  42.         }
  44.         .container > div:nth-last-of-type(-n + 2) {
  45.             background-color: lightgreen;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <div class="container">
  51.         <span>flex-start</span>
  52.         <span>center</span>
  53.         <span>flex-end</span>
  54.         <div>1</div>
  55.         <div>2</div>
  56.         <div>3</div>
  57.     </div>
  58. </body> 
  59. </html>
  • 效果图

伪类选择器总结_2:

名称 实例 描述说明
:first-of-type .container > span:first-of-type {} 选中父元素的第一个span元素
:last-of-type .container > span:last-of-type {} 选中父元素的最后一个span元素
:nth-of-type(-n + 2) .container > div:nth-of-type(-n + 2) {} 选中父元素下面从索引1开始的2个div子元素
:nth-last-of-type .container > div:nth-last-of-type(-n + 2) {} 选中父元素下面从索引倒数开始的2个div子元素(逆向: 从最后那个子元素开始选中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.     <style>
  8.         input:enabled {
  9.             background-color: red;
  10.         }
  12.         input:disabled {
  13.             background-color: yellow;
  14.         }
  16.         input:required {
  17.             background-color: blue;
  18.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <input type="text" value="enabled">
  24.     <hr>
  25.     <input type="text" disabled value="disabled">
  26.     <hr>
  27.     <input type="text" required value="required">
  28. </body> 
  29. </html>
  • 效果图

伪类选择器总结_3:

名称 实例 描述说明
:enabled input:enabled {} 选择所有有效的input元素, input默认是enabled
:disabled input:disabled {} 选择带有disabled属性的input元素
:required input:required {} 选择带有必选项required属性的input元素
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：你是10期学员吧, 又把选择符复习了
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