Priority properties of CSS

Sorry, this article is not written in English and has not been translated into English yet .You can view this article in English with Google Translate, or please come back later.

新手朋友们在写css的时候,有时会遇到这样的情况,辛辛苦苦写了一条css,刷新页面一看,“OH!Shit!为什么页面没有变化”?

举个栗子! HTML:

我是列表我是列表我是列表我是列表

CSS:

.nav li {color:red;}
.nav_active {color:yellow;}

很典型的例子,当然了如果你能准确的回答第三个列表是红色的话,后面的内容就可以不用看了~ 为什么不是黄色呢?这就是一个典型的权的问题。

下面是我曾经看到过的一篇文章,贴上来,还木有完全搞清楚的童鞋可以看看!时间久远了来源已经找不到了,对不住原文作者了~

---------华丽丽的分割线----------

选择器一样的情况下后面的会覆盖前面的属性。比如:

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选择器)

body #content .alternative p的特性是112(两个html选择器,一个ID选择器,一个类选择器)

按照上面的规则,div p.tree的特性比div p高,body #content .alternative p又比它们两个都高

398480
  • logo
    • HI, THERE!I AM MOFEI

      (C) 2010-2024 Code & Design by Mofei

      Powered by Dufing (2010-2020) & Express

      IPC证:沪ICP备2022019571号-1