网页中引用两个css冲突该怎么办?

html-css010

网页中引用两个css冲突该怎么办?,第1张

CSS代码修改。

有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下。

css的顺序是“元素上的style”>“文件头上的style元素”>“外部样式文件”,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明。经过测试和继续搜索,得知优先级如下排列:

样式表的元素选择器选择越精确,则其中的样式优先级越高:id选择器指定的样式>类选择器指定的样式>元素类型选择器指定的样式。所以上例中,#navigator的样式优先级大于.current_block的优先级,及时.current_block是最新添加的,也不起作用。

对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高。注意,这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。比如.class2在样式表中出现在.class1之后:

3.如果要让某个样式的优先级变高,可以使用!important来指定:

将border从#navigator中拿出来,放到一个class.block中,而.block放到.current_block之前:

1.  内联样式表的权值最高 1000;

2.  ID 选择器的权值为 100

3.  Class 类选择器的权值为 10

4.  HTML 标签选择器的权值为 1

一个元素的选择器的权值是所有选择器权值的和,冲突的时候根据权值执行,权值高的优先执行,如果权值相等,后面的会覆盖前面的

它可能不像其它那么重要,大部分案例你不需要担心冲突,但大型而且复杂的CSS文件,或有很多CSS文件组成的,可能产生冲突。选择器一样的情况下后面的会覆盖前面的属性。比如:p { color: red}p { color: blue} p元素的元素将是蓝色,因为遵循后面的规则。然而,你不可能经常用相同的选择器冲突达到目的,当你使用嵌套选择器,合理的冲突来了。比如:div p { color: red}p { color: blue} 也许你看起来p元素在div元素里面的颜色是蓝色,就像后面p元素的规则,但是第一个选择器的特性却是红色。基本上,一个选择器越多特性,样式冲突的时候将显示它的样式。一组嵌套选择器的实际特性可以计算出来。基本的,使用ID选择器的值是100,使用class选择器的值是10,每个html选择器的值是1。它们加起来就可以计算出特性的值。 p的特性是1(一个html选择器)div p的特性是2(两个html选择器).tree的特性是10(1个class选择器)div p.tree的特性是1+1+10=12,(两个html选择器,一个class选择器)#baobab的特性是100(1个ID选择器)