原文地址

效果：

代码：

源代码： 优先级 * { color:red;} body { color:green;} #id { color:yellow;} .class { color:blue;} 我是绿色的,我本身的Style为body定义的Style，如果去掉body的样式，我显示红色 我是红色的,我本身无Style，我显示红色 我是灰色,我有我自己的Style,不受父元素影响( style 优先于其他,与顺序无关) 我是灰色,我有我自己的Style,不受父元素影响( style 优先于其他,与顺序无关) 我是灰色,我有我自己的Style,不受父元素影响( style 优先于其他,与顺序无关) 我是黄色,我有我自己的Style,不受父元素影响 ( id 优先于 class,与顺序无关) 我是黄色,我有我自己的Style,不受父元素影响 ( id 优先于 class,与顺序无关)

Style > ID > Class > *

结论：

如果是同一元素同时使用Style,ID,Class来指定样式. 那么: Style > ID > Class > * ( > 表示优先 )

如果是不同元素,还需要看元素父层级的样式: 1.子元素自身有样式,以自身的为准. 2.子元素未设定样式,此时如果父元素有定义的话套用父元素的样式否则以默认显示