search

博客列表 >CSS的常用选择器

CSS的常用选择器

万物皆对象
万物皆对象原创
2020年04月15日 13:59:33679浏览

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元素
上一条：html基础盒子模型下一条：选择器知识点汇总
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多