CSS学习笔记3：选择器及优先级
CSS选择器的类型：
- 标签选择器
- 类选择器
- ID选择器
- 全局选择器
- 群组选择器
- 后代选择器
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选择器 > 标签选择器 > 通配符*
|
权值相同
|
权值不同 |
| 就近原则 | 使用权值高的 |
