css-(继承性、权重、层叠性问题）

一、一些css3 的选择器

1.1 儿子选择器

儿子选择器就是>:

IE7 开始兼容，IE6不兼容

div>p{

color: red;

}

1.2序选择器

IE8开始兼容，IE6,7不兼容

选择第一个li：

< style type="text/css">

ul li:first-child{

color: red;

}

</style>

选择最后一个li：

<style type="text /css">

ul li:last-child{ 

color:blue;

}

</style>

1.3下一个兄弟选择器

+表示

<style type="text/css">

h3+p{

color:red;

}

</style>

1.4兼容问题的介绍

1.浏览器兼容问题，IE6，IE7都是很低级的浏览器，一般就是这两个浏览器的兼容问题。

2.浏览器的占有率：http://tongji.baidu.com/data/

二、css的继承性和层叠性

2.1继承性

有些属性，当自己设置的时候，自己的后代都继承上了，这就是继承性。

哪些属性可以继承？

color、text开头的、line-开头的、font-开头的

关于文字样式的都可以继承，所有关于盒子定位的布局的属性都不能继承。

2.2层叠性

层叠性：就是css处理冲突的能力。所有的权重计算，没有任何兼容的问题

（1）当选择器选上了某个元素的时候，那么要统计权重。

id数量，类的数量，标签的数量

<style type="text/css">
#box1 .hezi p{
color:red;
}
div div #box3 p{
color: red;
}
div.hezi1 div.hei2 div.hezi3 p{
color:blue;
}
</style>

同样的都选择相同的p，权重：

1,1,1

1,0,3

0,3,4

比较的是先id数量，再类数量，后标签数量。第一种权重大。

如果权重一样则以后出现的为准。

（2）如果不能直接选中某个元素，权重为零

开始数权重的时候，先要看是不是真的选中了文字所在的最内层。

如果都是0，那么有一个就近原则，谁进就听谁的。

权重大总结：

1）先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计算权重

如果都一样的大，听写在后面的。

2）如果没有选中，那么权重是0，如果都是0，就近原则，谁描述的进，听谁的。

2.3权重问题深入

1.同一个标签，携带多个类名，有冲突

<p class="spe1 spe2">我是什么颜色？</p>

<p class=""spe2 spe1">我是什么颜色？</p>

和在标签中的类名书写顺序无关，之和css的顺序有关，

.spe2{

color:blue;

}

.spe1{

color:red;

}

结果是红色的，因为css中red写在后面，只看css样式，谁在前面谁在后面。

2.4！important 标记

<style type="text/css">

p{

color:red !important;

}

#para{

color:blue:

}

</style>

important是英语重要意思，可以通过语法k:v !important;来给属性提高权重，这样的权重是无穷大的。

1）!important提升的是一个属性，而不是一个选择器，（前提是都全中）

p{

color:red!important; 只写了一个！important，所以就字体颜色属性提升权重，font-size没有提升权重。

font-size：100px;

}

#paral{

color:blue;

font-size:50px;

}

综合来看字的颜色是red，字号是50px,因为！importation的权重最大，所以是red，但是#的权重大于标签的权重，所以字号的大小是50px.

2)!important无法提升继承的权重，该是0还是0

<div>

<p> hahah</p>

</div>

有css样式

div{

color：red！important；

}

p{

color：blue；

}

由于div是通过继承性来影响文字颜色的，所以important无法提升它的权重。权重是0，干不过p标签，因为p标签是实实在在的选择的，所以字的颜色是蓝色。

3）！important不影响就近原则

如果大家都是继承的，按理说应该按照就近原则，那么important能不能影响就近原则呢？

回答是：不能，不能给一个描述的远的加！important来提高权重。