文档介绍：前端笔试面试中的常用知识点总结(CSS)
前端开发13小时前62浏览
• 分享
已赞收藏
CSS选择器的优先级
!important >内联> id选择器 > 类选择器 > 标签选择器 多个类选择器叠加(256)之后的优先级大于一个id选择器 !important用于强调CSS属性具有最高的优先级。IE6不支持这种用法。
CSS选择器的种类：
1 .id 选择器(# myid)
类选择器(.myclassname)
标签选择器(div, h1,p)
相邻选择器(hi + p)
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
属性选择器(a[rel = "external"])
伪类选择器(a: hover, li:nth-child)
2、 CSS优先级权重计算法 CSS优先级的计算规则如下：
元素标签中定义的样式(Style属性)，加1,0,0,0 每个ID选择符(如#id),加0,1,0,0
每个Class选择符、每个属性选择符、每个伪类(:hover)加0,0,1,0 每个元素选择符(如p)或伪元素选择符(如:firstchild)等，加0,0,0,1 然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值 然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。
3、 超链接访问过后hover样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不在具有hover和active 了，解决方法是改变CSS属性的排 列顺序：L-V-H-A (link,visited,hover,active)
4、 什么是Css Hack? ie6,7,8的hack分别是什么？
针对不同的浏览器写不同的CSS code的过程，就是CSS hack。
{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
***@media all and (min-width:0px){
#test {background・color:black\0;}
} /*opera*/
***@media screen and (-webkit-min-device- pixel- ratio:0){ {background-color:gray;}
} /*chrome and safari*/
咎曲皿丘剛 钿氏:一畑
€4
IE7 | IE8
FF
Smart
FT
K
X
X
X
x
X
X
X
x
W
X
X
X
o
X
X
X
X
•MtoKTMfltrd
)
x
X
X