Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS常用选择器和伪类伪元素介绍
Blogger Information
Blog 24
fans 1
comment 0
visits 20861
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
1249 people have browsed it

除了经常用到的ID选择器、类选择器、元素选择器。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.       /*简单选择器*/
  10.       /*类选择器*/
  11.       .container {
  12.         height: 300px;
  13.         width: 650px;
  14.       }
  15.       .item {
  16.         float: left;
  17.         text-align: center;
  18.         line-height: 100px;
  19.         background-color: cadetblue;
  20.         width: 100px;
  21.         height: 100px;
  22.         margin-right: 20px;
  23.         margin-bottom: 20px;
  24.         color: white;
  25.         font-size: 50px;
  26.       }
  27.       /*多个类复合应用*/
  28.       .item.center {
  29.         background-color: tomato;
  30.       }
  31.       /*ID选择器*/
  32.       #first {
  33.         background-color: violet;
  34.       }
  36.       .item#first {
  37.         background-color: yellowgreen;
  38.       } /*会覆盖上面的单ID选择器，因为优先级高*/
  39.       /* * 号属于元素级别， #first默认是 *#first.   */
  40.       /*id,class可以添加在任何元素上，*/
  42.       #first.item {
  43.         background-color: blue;
  44.       } /*优先级比.item#first高*/
  45.     </style>
  46.   </head>
  47.   <body>
  48.     <div class="container">
  49.       <div class="item" id="first">1</div>
  50.       <div class="item">2</div>
  51.       <div class="item">3</div>
  52.       <div class="item">4</div>
  53.       <div class="item center">5</div>
  54.       <div class="item">6</div>
  55.       <div class="item">7</div>
  56.       <div class="item">8</div>
  57.       <div class="item">9</div>
  58.     </div>
  59.   </body>
  60. </html>

简单选择器

上下文选择器

  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.       /*ID选择器以后常用在表单中和锚点中，不建议CSS中用很多的ID选择器 ID和表单中的label对应*/
  9.       .container {
  10.         height: 300px;
  11.         width: 650px;
  12.       }
  13.       .item {
  14.         float: left;
  15.         text-align: center;
  16.         line-height: 100px;
  17.         background-color: cadetblue;
  18.         width: 100px;
  19.         height: 100px;
  20.         margin-right: 20px;
  21.         margin-bottom: 20px;
  22.         color: white;
  23.         font-size: 50px;
  24.       }
  26.       /*后代选择器*/
  27.       .container div {
  28.         border: 3px salmon solid;
  29.       }
  31.       /*父子选择器*/
  33.       body > div {
  34.         border: turquoise 5px solid;
  35.       } /*只针对他的儿子级设置*/
  37.       /*同级相邻选择器*/
  38.       .center + .item {
  39.         background-color: slateblue;
  40.       }
  42.       /*同级所有选择器*/
  43.       .center ~ .item {
  44.         background-color: tan;
  45.       }
  46.     </style>
  47.   </head>
  48.   <body>
  49.     <div class="container">
  50.       <div class="item">1</div>
  51.       <div class="item">2</div>
  52.       <div class="item">3</div>
  53.       <div class="item">4</div>
  54.       <div class="item center">5</div>
  55.       <div class="item">6</div>
  56.       <div class="item">7</div>
  57.       <div class="item">8</div>
  58.       <div class="item">9</div>
  59.     </div>
  60.   </body>
  61. </html>

上下文选择器

伪类选择器

  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.       .container {
  9.         height: 300px;
  10.         width: 650px;
  11.       }
  12.       .item {
  13.         float: left;
  14.         text-align: center;
  15.         line-height: 100px;
  16.         background-color: cadetblue;
  17.         width: 100px;
  18.         height: 100px;
  19.         margin-right: 20px;
  20.         margin-bottom: 20px;
  21.         color: white;
  22.         font-size: 50px;
  23.       }
  25.       /*匹配第一个子元素*/
  26.       .container .item:first-child {
  27.         background-color: thistle;
  28.       }
  29.       /*匹配最后一个子元素*/
  30.       .container > .item:last-child {
  31.         background-color: thistle;
  32.       }
  33.       /*匹配指定的一个子元素，排序从1开始*/
  34.       .container .item:nth-child(3) {
  35.         background-color: thistle;
  36.       }
  38.       /*匹配奇数*/
  39.       .container .item:nth-child(odd) {
  40.         background-color: violet;
  41.       }
  42.       .container .item:nth-child(2n-1) {
  43.         background-color: violet;
  44.       }
  45.       /*匹配偶数*/
  46.       .container .item:nth-child(even) {
  47.         background-color: yellow;
  48.       }
  49.       .container .item:nth-child(2n) {
  50.         background-color: yellow;
  51.       }
  53.       /*指定位置开始，选择剩下所有的元素*/
  54.       .container .item:nth-child(n + 4) {
  55.         background-color: turquoise;
  56.       }
  57.       /*只取前三个*/
  58.       .container .item:nth-child(-n + 3) {
  59.         background-color: black;
  60.       }
  61.       /*只取最后三个*/
  62.       .container .item:nth-last-child(-n + 3) {
  63.         background-color: blueviolet;
  64.       }
  65.       /*取第8个*/
  66.       .container .item:nth-last-child(2) {
  67.         background-color: red;
  68.       }
  69.     </style>
  70.   </head>
  71.   <body>
  72.     <div class="container">
  73.       <div class="item">1</div>
  74.       <div class="item">2</div>
  75.       <div class="item">3</div>
  76.       <div class="item">4</div>
  77.       <div class="item center">5</div>
  78.       <div class="item">6</div>
  79.       <div class="item">7</div>
  80.       <div class="item">8</div>
  81.       <div class="item">9</div>
  82.     </div>
  83.   </body>
  84. </html>

伪类选择器

结构伪类选择器

  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.       .container {
  9.         height: 300px;
  10.         width: 650px;
  11.       }
  12.       .item {
  13.         float: left;
  14.         text-align: center;
  15.         line-height: 100px;
  16.         background-color: cadetblue;
  17.         width: 100px;
  18.         height: 100px;
  19.         margin-right: 20px;
  20.         margin-bottom: 20px;
  21.         color: white;
  22.         font-size: 50px;
  23.       }
  25.       /*匹配最后一个元素*/
  26.       .container div:last-of-type {
  27.         background-color: blue;
  28.       }
  29.       /*匹配第一个span元素*/
  30.       .container span:first-of-type {
  31.         background-color: yellow;
  32.       }
  33.       /*匹配指定的一个div元素*/
  34.       .container div:nth-of-type(3) {
  35.         background-color: red;
  36.       }
  37.       /*匹配前两个div元素*/
  38.       .container div:nth-of-type(-n + 2) {
  39.         background-color: tomato;
  40.       }
  42.       /*匹配倒数两个div元素*/
  43.       .container span:nth-last-of-type(-n + 2) {
  44.         background-color: yellowgreen;
  45.       }
  46.     </style>
  47.   </head>
  48.   <body>
  49.     <div class="container">
  50.       <div class="item">1</div>
  51.       <div class="item">2</div>
  52.       <div class="item">3</div>
  53.       <div class="item">4</div>
  54.       <span class="item">5</span>
  55.       <span class="item">6</span>
  56.       <span class="item">7</span>
  57.       <span class="item">8</span>
  58.       <span class="item">9</span>
  59.     </div>
  60.   </body>
  61. </html>

结构伪类选择器

伪类与伪元素

  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.       }
  12.       /*target必须和ID配合，实现锚点操作 称为目标选择器*/
  13.       /*当前#login-form的表单元素被a的锚点激活的时候执行*/
  14.       #login-form:target {
  15.         display: block;
  16.       }
  18.       /* :focus 获取焦点的时候执行 */
  19.       input:focus {
  20.         background-color: yellow;
  21.       }
  23.       /* ::selection设置被选中元素的前景色和背景色 */
  25.       input::selection {
  26.         background-color: red;
  27.         color: white;
  28.       }
  30.       /*:not()选择不满足条件的元素*/
  31.       .list > :not(:nth-of-type(3)) {
  32.         color: red;
  33.       }
  35.       /*伪元素前面是双引号，伪类是单引号，如果不兼顾IE8. 伪元素也可单引号*/
  37.       /*::before和::after*/
  39.       .list::before {
  40.         content: "前面添加内容";
  41.         font-size: 1.5rem;
  42.         color: yellowgreen;
  43.       }
  44.       .list::after {
  45.         content: "后面添加内容";
  46.         color: violet;
  47.       }
  48.     </style>
  49.   </head>
  50.   <body>
  51.     <!-- <a href="#login-form">点击打开登陆</a> -->
  52.     <button onclick="location='#login-form'">点击登陆</button>
  54.     <form action="" method="POST" id="login-form">
  55.       <label for="name">用户名</label>
  56.       <input id="name" type="text" />
  57.       <label for="password">密码</label>
  58.       <input type="password" id="password" />
  59.     </form>
  61.     <hr />
  62.     <ul class="list">
  63.       <li>item1</li>
  64.       <li>item2</li>
  65.       <li>item3</li>
  66.       <li>item4</li>
  67.     </ul>
  68.   </body>
  69. </html>

" class="reference-link">伪类与伪元素

总结：CSS的选择器很多，选择一个元素可以用多种方法来实现。你懂的越多，代码就会写的越简洁。
建议大家做好笔记，经常测试使用，只有多使用，才能牢记于心。

备注：内容中咋多出了 “ class=”reference-link”> 我写的文章中是没有的。添加最后一个图片出现的！

Correcting teacher：GuanhuiGuanhui

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