CSS学习笔记3：选择器及优先级

CSS选择器的类型：

1. 标签选择器
2. 类选择器
3. ID选择器
4. 全局选择器
5. 群组选择器
6. 后代选择器

 

---

1.标签选择器：

    以HTML的标签作为选择器，凡是选择了一个标签，那么所有这个标签的内容都是用了css样式

    用法很简单，直接在style中 标签{}即可声明

<style>
    p,h1,a{font-size:50px;}
</style>

 

---

2.类选择器：

    标签选择器无法实现某一类标签里的标签css样式特殊化化

    通过个标签命名类分类，例如<p class="pclass"> </p>来将一个p便签命名为pclass，再在style中以 .（点）pclass（类名）来声明

    .pclass{color:red;}

    可以给同一类的不同标签设置不同的样式，只需要在.classname前加入标签名，例如p.classname{}

    一个标签可以引用多个类选择器创建的样式，用空格隔开，例如

<p class=“one two three”></p>

 

---

3.ID选择器：

    用法与类选择器类似，在开始标签中添加标签的id，例

<p id=“one”>ID选择器</P>

　在style中用#id声明，例

　　

<style>
    #one{color:red;}
</style>

    ps：一个标签只能有一个id

 

---

4.群组选择器：

    既一个声明有多个选择器，他们以逗号隔开，例

.red,#one,p{font-size:30px;}

 

---

5.全局选择器：

    顾名思义全局选择器就是一个声明选择所有的标签，用*表示所有的标签,又叫通配符选择器

*{color:yellow;}

---

 

6.后代选择器：

    父子节点以空格隔开

div p b{font-size:100px;}     /* div标签里的p标签里的b标签*/

---

选择器的优先级与叠加：

    ①  在冲突的情况下（同一种选择器）

         用同一种css属性，例如都是color修饰，采取就近原则，取最下面那个。

h1{color:red;}
h1{color:purple;}

        例如上面这个，最后h1标签是字体是紫色。 

        用不同一种css属性，会将效果叠加在一起

h1{color:red;}
h1{font-size:50px;}      
h1{color:red;
   font-size:50px} 

        这两个效果是一样的

    ②在非冲突的情况下（不同选择器）

        用同一个css属性修饰同一个标签采取一定的优先级

            内部样式中 id选择器 > 类选择器

---

 

    ps：当声明了多个相同属性的class（相同类型）时，一个标签选择多个class，最后的结果为最后声明的class（与开始标签中的class的顺序无关）

.classred{color:red;} 
.classblue{color:blue;}

 先有如上两个内部class

<p class=“classred classblue”>test</p>
<p class=“classblue classred”>test</p>

 这两个效果是一样的，都test都显示为蓝色，因为.classblue{color:blue;}是最后声明的     

---

    当涉及到后代选择器，有多个css选择同一个类标签时，优先级的考虑复杂了些许，标签使用哪个css可以通过计算权值来决定优先

    在同一个样式表中（同一个style或css文件）：

        1.权值相同：就近原则

        2.权值不同：选取权值最高的使用

    选择器的权值：

• 标签选择器：1
• 类选择器和伪类：10
• ID选择器：100
• 通配符选择器：0
• 行内样式：1000

    权值计算的规则：不同种选择器数量x权值之和

    例如：

#one div.color h2{…}

        ID：1x100

        标签：2 x1

        类：10

    总权值：100+2+10=112

重要性：

    涉及到优先级有一个特殊的语句，!important，在css中写入后这个最优先。注意!important要写在;分号前

    

p{color:blue !important;}
#one{color:red;}
 
<p>important</p>

因为标签选择器使用了!important，所以这里显示蓝色

p{color:blue !important;}
#one{color:red !important;}
 
<p>important</p>

这时候就显示红色。当大家都有!important时，就按照老方法，无视!important就好了

    CSS优先级总结

• !important声明最高
• CSS使用方法的优先级

                    行内样式 > 内部样式 > 外部样式

                        PS：link链入外部样式和style内部样式的优先级，取决于先后顺序

• 样式表中优先级

                id选择器 > class选择器 > 标签选择器 > 通配符*

     

权值相同	权值不同
就近原则	使用权值高的