CSS层叠

目录
[1]特殊性 [2]重要性 [3]继承 [4]层叠

前面的话

　　层叠样式表中最基本的一方面是层叠——冲突的声明通过层叠过程排序，并由此确定最终的文档表示，这个过程的核心是选择器及其相关声明的特殊性，以及继承机制。

特殊性

　　选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分:

【1】内联样式 -> 1,0,0,0
【2】ID属性值 -> 0,1,0,0
【3】类属性值、属性选择或伪类 -> 0,0,1,0
【4】元素或伪元素 -> 0,0,0,1
【5】结合符和通配选择器 -> 0,0,0,0

h1{} -> 0,0,0,1
p em{} -> 0,0,0,2
.grape{} -> 0,0,1,0
*.bright{} -> 0,0,1,0
p.bright em.dark{} -> 0,0,2,2
#id121{} -> 0,1,0,0
div#side *[href]{} -> 0,1,1,1

重要性

　　重要声明：在声明的结束分号之前插入!important来标志

继承

　　继承是从一个元素向其后代元素传递属性值所采用的机制。基于继承机制，样式不仅可以应用到指定的元素，还会应用到它的后代元素。继承的属性没有特殊性。
　　[注意1]在HTML中，应用到body元素的背景样式可以传递到html元素
　　[注意2]<a>标签不会继承父元素的文本样式

层叠

【1】按来源及重要性排序。读者!important > 创作人员!important > 创作人员 > 读者 > 用户代理
【2】按特殊性排序
【3】按出现顺序排序，一个声明在样式表或文档中越后出现，权重越大

// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d/)){
select.push(all[i]);
}
}

}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+1])
}
}else{
change(oCon.children[select.length])
}
}

}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);

var oCon = document.getElementById("content");
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}

}
oCon.children[i].onclick = function(){
change(this);
}
}

function change(_this){
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>