Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS选择器
Blogger Information
Blog 55
fans 3
comment 0
visits 54666
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
500 people have browsed it

CSS选择器

一、简单选择器

1. 元素选择器：标签选择器

实例：

  1. body {
  2.         background-color: red;
  3.         }

浏览器显示结果：

2. 类选择器：对应着html中的class属性

实例：

  1. <head>
  2. <style>
  3.   .box{
  4.         width:200px;
  5.         height:200px;
  6.         background:green;
  7.       }
  8. </style>
  9. </head>
  10. <body>
  11.   <div class="box"></div>
  12. </body>

浏览器显示结果：

3. 复合类样式：把一个元素的多个类写在一起

实例：

  1. <head>
  2. <style>
  3.    .box{
  4.       width:200px;
  5.       height:200px
  6.       background:red;
  7.    }
  8.    .box.box1{
  9.       background:blue;
  10.    }
  11. </style>
  12. </head>
  13. <body>
  14. <div class="box box1"></div>
  15. </body>

浏览器显示结果：

学习重点：认识这种写法，知道这种写法是什么意思，在css中后面相同的属性会覆盖前面的属性，所以显示结果为蓝色。

4. id选择器

实例：

  1. <head>
  2. <style>
  3. .box#box{
  4. width:200px;
  5. height:200px;
  6. background:red;
  7. }
  8. #box{
  9. background:blue;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div class="box" id="box"></div>
  15. </body>

浏览器显示结果：

学习重点：因为.box#box的优先级要高于#box所以显示为红色。而#box.box的优先级要比.box#box的优先级更高，了解复合类样式的优先级规则。id现在很少用，大部分用在表单和锚点上，所以尽可能用class选择器

二、上下文选择器

1. 后代选择器：空格（接下来用九宫格来做实例）

  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.         width: 625px;
  10.         height: 625px;
  11.         padding: 5px;
  12.         background: #ffffff;
  13.         display: grid;/*网格布局*/
  14.         grid-template-columns: repeat(3, 1fr);
  15.         /*网格的列为3个宽度相同的列*/
  16.         grid-gap: 5px;/*网格间距为5像素*/
  17.       }
  18.       .item {
  19.         font-size: 4rem;rem/*相对大小*/
  20.         display: flex;/*弹性布局*/
  21.         justify-content: center;
  22.         align-items: center;/*居中*/
  23.         background: #f5bb1e;/*垂直居中*/
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="container">
  29.       <div class="item">1</div>
  30.       <div class="item">2</div>
  31.       <div class="item">3</div>
  32.       <div class="item">4</div>
  33.       <div class="item center">5</div>
  34.       <div class="item">6</div>
  35.       <div class="item">7</div>
  36.       <div class="item">8</div>
  37.       <div class="item">9</div>
  38.     </div>
  39.   </body>
  40. </html>


接下来用后代选择器的方式，给九宫格加上边框

  1. <style>
  2.   .container .item{border:2px solid #000;}
  3. </style>

显示结果：

给所有的具有.item选择器的元素都加上了边框

2. 父子选择器：>

实例：

  1.   <style>
  2.      body > div {border:5px solid orange;}
  3.   </style>

显示结果：

如果用后代选择器的话

  1.   <style>
  2.      body  div {border:5px solid blue;}
  3.   </style>

显示结果：

学习重点：后代选择器表示的是不仅是父子关系，它会获得所有后代元素，用空格来连接；父子选择器表示的仅仅是父子关系，用>来连接。

3. 同级相邻选择器：+

实例：

  1.   <style>
  2.      .item.center + .item{background:greenyellow;}
  3.   </style>

显示结果：

4. 同级所有选择器：~

实例：

  1.   <style>
  2.      .item.center ~ .item{background:red;}
  3.   </style>

显示结果：

三、结构伪类选择器(不分组)

1. 匹配第一个子元素： (:first-child)

实例：(九宫格)

  1.   <style>
  2.      .container :first-child{background:red;}
  3.   </style>

结果：

这里我发现如果.container后面没空格的话就会把样式加给自身.container

  1.   <style>
  2.      .container:first-child{background:red;}
  3.   </style>

结果：

学习重点：:first-child没有父元素的话会从根元素开始匹配每个父元素下的第一个元素，一定要在:first-child前面加上父元素并加空格

2. 匹配最后一个元素： （:last-child）

实例：

  1.   <style>
  2.      .container :last-child{background:red;}
  3.   </style>

结果：

3. 选择第n个元素：nth-child(n)

实例1：选择第四个方框

  1.   <style>
  2.      .container :nth-child(4){background:red;}
  3.   </style>

结果：

实例2：选择奇数偶数元素

  1.   <style>
  2.      .container :nth-child(2n){background:red;}
  3.      /*偶数为红色*/
  4.      .container :nth-child(2n-1){background:green;}
  5.      /*奇数为绿色*/
  6.   </style>
  7.   或者用even表示偶数，odd表示奇数
  8.    .container :nth-child(even){background:red;}
  9.      /*偶数为红色*/
  10.      .container :nth-child(odd){background:green;}
  11.      /*奇数为绿色*/

结果：

实例3：选择前3个元素

  1. <style>
  2.     .container :nth-child(-n + 3){background:blue;}
  3. </style>

结果：

实例3：选择倒数前3个元素

  1. <style>
  2.     .container :nth-last-child(-n + 3){background:blue;}
  3. </style>

结果：

实例3：选择第5个到第8个元素

  1. <style>
  2.     .container :nth-child(n + 5):nth-child(-n + 8){background:green;}
  3. </style>

结果：

学习重点：n的索引是从0开始的，所以2n就是偶数，2n+1/2n-1就是奇数,选择从第几个开始是加几，选择从第一个到第几个是-n加几，选择n是从第5个到第8个是 :nth-chlid(n+5):nth-child(-n+8)，两者可以结合使用

四、伪类分组选择器

1. 匹配到最后一个元素

首先把九宫格代码部分改成<span class="item"></span>

  1.     <div class="item">1</div>
  2.     <div class="item">2</div>
  3.     <div class="item">3</div>
  4.     <span class="item">4</span>
  5.     <span class="item">5</span>
  6.     <span class="item">6</span>
  7.     <span class="item">7</span>
  8.     <span class="item">8</span>
  9.     <span class="item">9</span>

实例：

  1.   <style>
  2.       .container :last-of-type{background:pink;}
  3.   </style>

结果：

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

2. 匹配分组中的任意一个元素：(:nth-of-type(n))

实例1：匹配span分组中的第三个元素

  1.   <style>
  2.       .container span:nth-of-type(3){background:pink;}
  3.   </style>

结果：

实例2：匹配span分组中的前三个元素

  1.   <style>
  2.       .container span:nth-of-type(-n + 3){background:pink;}
  3.   </style>

结果：

实例3：匹配span分组中的倒数2个元素

  1.   <style>
  2.       .container span:nth-last-of-type(-n + 2){background:pink;}
  3.   </style>

结果：

五、伪类与伪元素

1. :target必须与id配合，实现锚点操作

实例：

  1. <head>
  2. <style>
  3.       #login-form {display: none;}
  4.       #login-form:target {display: block;}
  5.       /*当前#login-form的表单元素被a的锚点激活时执行*/
  6.     </style>
  7.   </head>
  8.   <body>
  9.     <a href="#login-form">我要登录：</a>
  10.     <form action="" method="post" id="login-form">
  11.       <label for="email">邮箱：</label>
  12.       <!--<label> 标签为 input 元素定义标注（标记）-->
  13.       <input type="email" name="email" id="email" />
  14.       <label for="password">密码：</label>
  15.       <input type="password" name="password" id="password" />
  16.       <button>登录</button>
  17.     </form>
  18.   </body>

浏览器显示结果：

点击后

2. :focus 当获取焦点的时候

实例：

  1. <style>
  2. input:focus{background:yellow;}
  3. </style>

显示结果：

3. ::selection设置选中文本的前景色和背景色

实例：

  1. <style>
  2. input::selection{color:red;background-color:greenyellow;}
  3. </style>

显示结果：

::selection前面是双冒号

4. :not() 用于选择不满足条件元素

实例：

  1. <style>
  2. .list > *:not(:nth-of-style(2)){color:red;}
  3. </style>
  4. <body>
  5. <ul class="list">
  6.       <li>1</li>
  7.       <li>2</li>
  8.       <li>3</li>
  9.       <li>4</li>
  10.     </ul>
  11. </body>

显示结果：

5. ::before在元素之前，::after 在元素之后

实例：

  1. <style>
  2. .list::before{content:"购物车";font-size:2rem;}
  3. .list::after{content:"结算中...";color:red;font-size:2rem;}
  4. </style>
  5. <body>
  6. <ul class="list">
  7.       <li>1</li>
  8.       <li>2</li>
  9.       <li>3</li>
  10.       <li>4</li>
  11.     </ul>
  12. </body>

显示结果：

::before,::after前面都是双冒号

六、表格

  1. <style>
  2. table,td,tr,th,caption {
  3.         border: 1px solid #000;
  4.         padding: 0px;
  5.         margin: 0px;
  6.       }
  7. </style>
  8. <!-- 表格：数据格式化的工具 -->
  9.     <table>
  10.       <!-- 表格标题 -->
  11.       <caption>
  12.         员工信息表
  13.       </caption>
  14.       <!-- 表格头部 -->
  15.       <thead>
  16.         <tr>
  17.           <th>姓名</th>
  18.           <th>性别</th>
  19.           <th>年龄</th>
  20.         </tr>
  21.       </thead>
  22.       <!-- 表格主体 -->
  23.       <tbody>
  24.         <tr>
  25.           <td>张三</td>
  26.           <td>男</td>
  27.           <td>22</td>
  28.         </tr>
  29.         <tr>
  30.           <td>张四</td>
  31.           <td>男</td>
  32.           <td>23</td>
  33.         </tr>
  34.         <tr>
  35.           <td>张莉</td>
  36.           <td>女</td>
  37.           <td>22</td>
  38.         </tr>
  39.       </tbody>
  40.       <!-- 表格尾部 -->
  41.       <tfoot>
  42.         <tr>
  43.           <td>尾部</td>
  44.           <td>尾部</td>
  45.           <td>尾部</td>
  46.         </tr>
  47.       </tfoot>
  48.     </table>

显示结果：

学习总结：

1.简单选择器：

css与id选择器的应用场景，id选择器现在大部分用在表单，锚点上，其它地方很少用，尽可能的用class选择器。

2.上下文选择器：

空格、>、+、~分别对应后代选择器、父子选择器、同级相邻选择器、同级所有选择器

3. 伪类选择器(不分组):

first-child,last-child,nth-child(n),nth-last-child(n),选择第一个元素，最后一个元素，选择任意一个元素，选择任意倒数一个元素，n初始索引值为1，但是有点难理解，课堂中说的一个例子，选择前三个元素，nth-child(-n+3),如果n的值为1，这里是不对的，n的值此时应该是0，老师后来说表达式的情况下为0，后来经过自己边写边想，发现确实是这样的，n正常情况下是1，在表达式中就是0，终于想明白了！

4.伪类分组元素:

  • 根据元素类型进行分组；
  • 在分组中按照索引进行选择；
    last-of-type,first-of-type,元素:nth-of-type(n),元素:nth-last-type(n)

5.伪类和伪元素:

  • :target必须与id配合，实现锚点操作；
  • :focus当获取焦点的时候；
  • ::selection设置选中文本的前景色和背景色；
  • :not() 用于选择不满足条件元素；
  • ::before在元素之前，::after 在元素之后。
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