前端必知：11.css选择器的使用以及选择器的优先级

目录

一，基础选择器

1.通配选择器 （权重最低）

2.标签名选择器

3.类名选择器

4.id选择器（权重最高）

5.群组选择器

二.层次选择器

1.后代选择器

2.父子选择器

3.兄弟选择器

4.相邻兄弟选择器

三,伪类选择器

link:初始时候的状态

visited：点击之后的状态

hover：鼠标悬浮时候的状态

active：鼠标点击时候的状态（鼠标按下不松手）

顺序 l-> v -> h -> a (先爱后恨)

四，选择器的优先级

什么时候需要考虑选择器的优先级？

选择器优先级的强弱顺序：

1.!important                                              100000

2.行间样式，在标签上添加 style属性        10000

3.id选择器                                                  1000

4.类名选择器，伪类选择器，属性选择器   100

5.（标签名）元素选择器，伪元素              10

6.通配符选择器                                            1

7.系统默认提供的css属性                            0

---

一，基础选择器

1.通配选择器 （权重最低）

* 表示通配符，它可以匹配任何标签

使用方式

*{

css内容

}

2.标签名选择器

E{css内容}给所有标签名为E的元素设置css样式

3.类名选择器

.类名{css内容} 使用的时候需要在标签上绑定 class="类名"如果有多个

类名，使用 空格 隔开，类名最好不要超过5个

4.id选择器（权重最高）

#id名{css内容}

在一个页面中，id是唯一的，只能绑定在一个标签上，也就是一个页面中

没有同名的id

5.群组选择器

如果多种选择器所表达的css内容是相同的，则可以把他们写成群组选择器

.wp,#abc,div{css内容}

    
    
    
    


    
      木兰诗
     
关山度若飞
     
寒光照铁衣
     
木兰不用尚书郎
    
可汗大点兵

二.层次选择器

1.后代选择器

E m { css内容 } 通过E选择器 设置 E中的 m 选择器 的css内容，m可以是E的

子级，也可以是E的后代中的某一个选择器

2.父子选择器

E>M {css内容} 通过E选择器找到 E选择器的子级M选择器，设置css内容

3.兄弟选择器

E~M{css内容}通过E选择器找到 该元素之后所有选择器名为M的兄弟元素，并

设置css样式

4.相邻兄弟选择器

E+M{css内容} (后面跟的只能是相邻的东西，不能是class名)过E选择器找到 该元素

之后第一个兄弟元素M，并且对M设置css样式

    
    
    
    


    
    

    

        
世上无难事 
        
世上无难事
        
世上无难事
        
 
世 上无难事
 
        
世上无难事
        
世上无难事
        
世上无难事
        
世上无难事
        
世上无难事
        
世上无难事
    
    

三,伪类选择器

a的伪类，伪类是css系统创建好的内部的类，用来对标签的某个时机设置样式

link:初始时候的状态

visited：点击之后的状态

hover：鼠标悬浮时候的状态

active：鼠标点击时候的状态（鼠标按下不松手）

顺序 l-> v -> h -> a (先爱后恨)

ie8以后，任何标签都可以添加 ：hover 伪类

可以根据hover 触发 元素本身，以及通过元素能找到的元素的变化

    
    
    
    


        
        数鸭子
        显示和隐藏  同行十二年不知木兰是女郎  
        

        
不知木兰是女郎
        图片
        

四，选择器的优先级

什么时候需要考虑选择器的优先级？

不同的选择器，同时作用于同一个标签元素，并且他们具有相同的

css属性设置，对该css属性设置不同的值。

选择器优先级的强弱顺序：

1.!important                                              100000

2.行间样式，在标签上添加 style属性        10000

3.id选择器                                                  1000

4.类名选择器，伪类选择器，属性选择器   100

5.（标签名）元素选择器，伪元素              10

6.通配符选择器                                           1

7.系统默认提供的css属性                          0

假设后面的数字是权重的值，那么在比较的时候，只需把选择器的值

相加，然后比较大小即是权重的大小。

如果他们的值相同，后来者居上（后面覆盖前面）

    
    
    
    


    
    

    

    

        归来见天子
        归来见天子
    
    归来见天子