HTML/CSS初学学习笔记1：CSS基础选择器与复杂选择器、权重以及权重计算问题（不会权重计算，你敢说自己会CSS？）

悠悠 2023-03-02 05:10 2阅读 0赞

## 前言 ##

CSS选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。

## 基础选择器 ##

### 标签选择器 ###

什么是标签选择器？

*  根据指定标签名称，在当前界面中找到所有该名称的标签，并设置属性

注意点

*  标签选择器选中的是当前界面所有同名标签，不能单独选中
 *  只要是HTML中的标签都可以作为标签选择器

**语法格式 标签名\{\}**

div {
        
       background-color: #F40;
    }

### id选择器 ###

什么是id选择器？

*  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

注意点

*  HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “\#” 来定义。
 *  每个HTML标签都有id属性
 *  同一个界面中id是唯一的，不能重复
 *  编写id选择器必须要在id前面加上一个\#号
 *  id的名称有一定的规范，只能由字母数字和下划线组成
 *  id的名称不能够以数字开头
 *  id的名称不能与HTML标签同名
 *  如果仅仅是为了设置样式，我们不会使用id，因为前段开发中id是留给js使用的

**语法格式 \#id名\{\}**

以下的样式规则应用于元素属性 id=“demo”:

<div id="demo"></div>
    #demo {
        
        background-color: #F40;
    }

### calss选择器（最常用的选择器） ###

什么是class选择器？

*  class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

注意点

*  每个HTML标签都有class属性
 *  同一个界面中class属性是可以重复
 *  编写class选择器必须要在class名称前面加上一个.号
 *  class的名称有一定的规范，只能由字母数字和下划线组成
 *  class的名称不能够以数字开头
 *  class的名称不能与HTML标签同名
 *  class就是专门给某一类标签设置样式的
 *  一个标签可以同时绑定多个class属性，class之间用空格隔开
 *  也可以指定特定的HTML元素使用class

**语法格式 .class**

.demo1 {
        background-color: #F40;}
    
    .demo2 {
        color : #000;}
    
    p.center {
        text-align:center;}/*特定的元素使用class*/
    
    <div calss="demo1 demo2"></div>
    /* 一个标签用两个class,之间用空格隔开 */
    
    <div calss="demo1" id="div1"></div>
    <div calss="demo1" id="div2"></div>
    /* 一个class可以被多个标签同时使用 */

### 属性选择器 ###

CSS属性选择器即是通过html的属性来选择元素  
如下代码

[id] {
        
        background-color: green;
    }
    <div id="demo1">123</div>
    <div id="demo2">456</div>

![在这里插入图片描述][20200727222252682.png]  
给属性选择器的属性添加属性值

[id="demo1"] {
        
        background-color: green;
    }
    <div id="demo1">123</div>
    <div id="demo2">456</div>

只有id 的属性值为demo1的标签才会变成绿色  
![在这里插入图片描述][20200727222621184.png]

### 通配符选择器 ###

**语法格式 \*\{\}**

\*是任意的意思，此处是 all，所有的标签（包括和）

* {
        
        background-color: #F40;
    }/* 整个页面的背景颜色均改变 */

### !important ###

!important，作用是提高指定样式规则的应用优先权（优先级）。

语法格式\{ cssRule !important \}，即写在定义的最后面，例如：.box\{color:red !important;\}。

--------------------

## CSS权重（很重要） ##

上述的几种基础选择器，如果同时出现，将会出现不同的优先级，这些优先级与这些选择器的权重有关，请看下面的表格

CSS权重

<table> 
 <thead> 
  <tr> 
   <th>名</th> 
   <th>权重</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>！important</td> 
   <td>infinity 正无穷</td> 
  </tr> 
  <tr> 
   <td>行间样式</td> 
   <td>1000</td> 
  </tr> 
  <tr> 
   <td>id 选择器</td> 
   <td>100</td> 
  </tr> 
  <tr> 
   <td>class 选择器、属性选择器、伪类选择器</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>标签选择器、伪元素选择器</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>通配符选择器</td> 
   <td>0</td> 
  </tr> 
 </tbody> 
</table>

注意

*  在计算机中，正无穷+1>正无穷
 *  如果权重值一样（优先级一样），会显示后面的。就是先来后到，谁在后面，谁（后面的）覆盖前面的——后面的会覆盖前面的
 *  在权重中，是 256 进制，是从 0 到 255 后变成 1。所以这里的 1000 不是一千，100 不是一百

## 复杂选择器 ##

### 父子选择器（派生选择器） ###

语法格式  
最外面的结构 外面的结构 里面的结构\{\} 就是一个父子结构

**注意：**

*  父子选择器中，每一个层级，都不一定要是标签选择器，写 class  
    选择器也行，重要的是表达出来父子关系。而且这种父子关系有可能是间接地，也有可能是直接的

/* 直接父子关系 */
    div span {
        
        background-color: red;
    }
    <div>
    	<span>123</span>
    </div>
    <span>234</span>
    
    /* 间接父子关系 */
    div em{
        
        background-color: red;
    }
    <div>
    	<strong>
    		<em>123</em>
    	</strong>
    </div>
    
    /* 直接子元素选择 */
    div>em {
        
        background-color: red;
    }
    <div>
    	<em>1</em>
    	<strong>
    		<em>2</em>
    	</strong>
    </div>

来思考个**问题**（问题来源，腾讯课堂《2020权威HTML+CSS零基础入学》）

看下面思考：浏览器是从右向左，还是从左向右找？  
![在这里插入图片描述][2020072723240249.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]

浏览器遍历的时候是从右向左找的(先看 em,再看 a,再看 li,再看 ul,再看 div)，更快更有效率

### 并列选择器 ###

先来看一个问题

<div>1</div>
    <div class="demo">2</div>
    <span class="demo">3</span>
    /* 要让2的背景颜色为红色，如何做到？ */
    /* 1.给第二个div添加id，然后使用id选择器 */
    /* 2.或者需要一个选择器，叫并列选择器 */
    
    div.demo {
        
        background-color: red;
    }

并列选择器的语法格式  
div.demo 在.之前不用写空格

/* 要选择em标签 有哪些方法*/
    <div calss="wrapper">
    	<div class="content">
    		<em class="box" id="only">1</em>
    	</div>
    </div>
    <em></em>
    /* 以下几种均可以做到，当然有的很复杂了 还有其他的方式也能选中em的 */
    
    #only {
        
        background-color: red;
    }
    
    .content em {
        
        background-color: green;
    }
    
    .wrapper > .content >.box{
        
        background-color: gray;
    }
    
    div.wrapper > div[class = "content"] > div#only.box{
        
        
    }

注意

*  在并列选择器中，标签选择器和 id 选择器和 class 选择器在一起，标签选择器必须放前面

来个问题

<div class="classDiv" id="idDiv">
    	<p class="classP" id="idP">1</p>
    </div>
    /* 显式什么颜色 */
    #idDiv .classP {
        
        background-color: red;
    }
    
    .classDiv .classP {
        
        background-color: green;
    }

答案是显式红色  
这里涉及了权重的计算问题  
这些标签出现在同一行，就是比较其相加之后的权重大小  
第一个选择器的 **权重和 = 100 + 1（256进制）**  
第二个的 权重和 = 10 + 10

/*100     10*/
    #idDiv .classP.classP {
        
        background-color: red;
    }
    /*1   10    100*/
    div .classP#idP {
        
        background-color: green;
    }
    /* 最终显式绿色 */

/*1   10    100*/
    div .classP#idP {
        
        background-color: green;
    }
    /*100   1    10*/
    #idDiv p.classP {
        
        background-color: red;
    }
    /*权重相等时，谁在后面，谁覆盖在最上层，显式什么颜色*/

### 分组选择器 ###

<div>1</div>
    <span>2</span>
    <em>3</em>
    /* 要让这三个数字的背景颜色均变为红色 */
    
    /* 可用如下的方法 */
    div {
        
        background-color: red;
    }
    
    span {
        
        background-color: red;
    }
    
    em {
        
        background-color: red;
    }
    
    /* 但是这个方法的代码冗余太多了，所以介绍一个分组选择器 */
    div,
    span,
    em {
        
        background-color: red;
    }

注意

*  可以写成一行，但是开发中一般都竖着写，方便看

Ps：若有错误，欢迎指出

[20200727222252682.png]: /images/20230208/2a69903033d94813be9aa8ebcdb4d87a.png
[20200727222621184.png]: /images/20230208/eaaee122d71d4342914a01135041dcbf.png
[2020072723240249.png]: /images/20230208/88f755b87f67455cab54e8fb45ae3232.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]: /images/20230208/8b8946345a294b8b818b8a9a9694cd0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/ae07a86579c94633a4b6313905702531.png