网页css选择器,web前端开发css
总觉得自己的CSS很别扭~ ~ ~,入职后决心加强。以前学CSS多是看实用的书,比如《精通CSS》,大多是技能。凭记忆~ ~发现自己这样的学习真的很弱,总是要跟着别人学。我觉得要想在某个领域做强,基本原则是必不可少的,于是有了我的第一篇关于CSS学习的文章。文章主要是根据《CSS权威指南》记录和整理了我的一些不靠谱的知识,发现真的是和这本书的一次相见恨晚。之前学CSS太浮躁,基础没打好。唉~ ~废话够多了,言归正传吧~
在选择器上,有一些特殊性和级联顺序规则需要熟悉。
选择器的特殊性:
选择器的特殊性是由其自身的组件决定的。特异性值用四部分表示,如0,0,0,0。选择器的具体特性确定如下:
ID属性值,加上0,1,0,0。
类属性值,属性选择或伪类,加0,0,1,0。
和伪元素,加上0,0,0,1。
共轭和通配符对特殊性没有贡献(即使没有贡献,也比继承值和浏览器默认样式优先级高)。通常,第一个0是为内联样式保留的。
级联规则:
按以下顺序确定级联规则:
找出元素匹配的规律。
按显示权重对所有匹配元素的声明进行排序!重要规则权重高于无!重要规则;
按来源对陈述进行分类,包括3个来源:创建者、读者和用户代理。创作风格优于读者风格。是啊!重要logo的阅读器风格比其他所有风格都强,包括!重要徽标的创建者样式。作者风格和读者风格都比用户代理的默认风格更强。
按特殊性对陈述进行排序,较高的特殊性胜出。
把申报单按顺序排好,最后一个就出来了。
葛坑
好了,先说个例子:测试p span { color:red };行为:0,1,2,0。
这一次,我终于发挥了我一个研究生的研究精神,我想,这种底层估计是一点一点实现的吗?这样就可以只用一个数字来表示。
有猜测就要论证。怎么会?充分发挥我不要脸的结论导向证明的精神。假设浏览器用1位数表示特殊性,那么每个类别的特殊性肯定有一个上限,一般情况下不应该太大,所以我有以下代码来证明:
基本理念:
用id test给一个div元素添加一个样式规则,给这个元素添加一定数量的类,然后把这些类组合起来再给一个规则。如果一定数量的类规则覆盖了id规则,那么我的猜测就被证实了。
!声明文档类型
超文本标记语言
头
meta charset=utf-8 /
标题选择器演示/标题
meta name= copyright content= http://www . hualai . net . cn /
风格
#测试{
颜色:红色;
/风格
/头
身体
div id=test
这是一个带有id测试的div。
/div
添加的类别数量:
输入类型=text id=count /
type= button id= add value= add /
脚本
document.getElementById(add )。onclick=function() {
var t=document . getelementbyid( test );
var count=Number(document . getelementbyid( count )。值);
var cls=“”;
var CSS=“”;
//添加it count类,同时拼接CSS字符串
for(var I=0;我数;i) {
cls= t i
css=。t I;
CSS= { color:blue;}
t.className=cls
//插入规则
loadStyleString(CSS);
//插入新的css规则
var loadStyleString=function(CSS){
var style=document . createelement( style );
style . type= text/CSS ;
尝试{
style . appendchild(document . create text node(CSS));
} catch(e) {//IE
style . style sheet . CSS text=CSS;
document . getelementsbytagname( head )[0]。appendChild(style);
/脚本
/body
/html
在输入框中输入您想要添加课程的次数。JS代码会给div元素添加与次数对应的类,并插入相应的规则。代码中id规则是#test{color:red},class规则是{color:blue},所以如果结论正确,div的字体颜色会变成蓝色。
通过这个屌丝投机不懈努力的考验,发现255是一个分水岭。当超过255倍,即2的8次方时,二进制数为11111111。在chrome下,div的文字颜色变成蓝色,也就是增加的类是256倍时,特殊性变成1,0,0,0,等于ID属性的特殊性。因为最后一条规则,它赢了。
为了保持完整性,在主要浏览器中测试了以下内容:
FF13,chrome22,IE9(包括其环境中的IE7/8模式)和safira5,256个类带来的特殊性等于一个id的特殊性。而IETester中opera12、IE9、IE6/7中的怪异模式不会超出id的特殊性,所以推测它们分别是用数字保存的,而不是用一个数字位保存的。