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选择器 > 标签选择器 > 通配符*
权值相同
| 权值不同 |
就近原则 | 使用权值高的 |
更多专业前端知识,请上 【猿2048】www.mk2048.com