关于id与class的优先级问题
--------------------编程问答-------------------- 应该没有级别，只有先后顺序！ --------------------编程问答-------------------- 可以用级联来解决！如：.Class #ID
或：#ID .class --------------------编程问答-------------------- 没有级别，只有先后顺序！ --------------------编程问答-------------------- 按先后顺序来说。这个content链接也应该要为红色了。为什么却又是灰色 --------------------编程问答-------------------- css的顺序是
1.直接写style="...."
2.class
3.#id --------------------编程问答--------------------
错了，应该是
1.直接写style="...."
2.#id
3.class
--------------------编程问答-------------------- 试试就知道了 --------------------编程问答-------------------- 如果是同一元素同时使用Style,ID,Class来指定样式.
那么: Style > ID > Class ( > 表示优先 )
如果是不同元素,还需要看元素父层级的样式:
1.子元素自身有样式,以自身的为准.
2.子元素未设定样式,此时如果父元素有定义的话套用父元素的样式否则以默认显示
以下是例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#content
{
color: Blue; /*蓝色*/
}
#content a
{
color:Yellow; /*黄色*/
}
.action
{
color: Red; /*红色*/
}
.action a, span
{
color: Green; /*绿色*/
}
#other
{
color: Pink; /*粉红*/
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
我是蓝色,我本身无Style,套用父元素 #content 定义的Style
<br />
<a>我是紫色,套用父元素 #content a 定义的Style</a>
<div class="action">
我是红色,我本身无Style,套用父元素 action 定义的Style
<br />
<a>按Lost_Painting理解,我应该是绿色,但我却是黄色,他很困惑</a><!-- a标签在Opera/IE下都显示是黄色,不知道为什么,BUG? -->
<br />
<span>我是绿色,套用父层元素 .action span 定义的Style</span><!-- span是绿色,符合我的理解 -->
</div>
<div id="content" class="action" style="color: Gray">
我是灰色,我有我自己的Style,不受父元素影响( style 优先于其他,与顺序无关)
</div>
<div class="action" id="content" style="color: Gray">
我是灰色,我有我自己的Style,不受父元素影响( style 优先于其他,与顺序无关)
</div>
<div style="color: Gray" id="content" class="action">
我是灰色,我有我自己的Style,不受父元素影响( style 优先于其他,与顺序无关)
</div>
<div id="other" class="action">
我是粉红色,我有我自己的Style,不受父元素影响 ( id 优先于 class,与顺序无关)
</div>
<div class="action" id="other">
我是粉红色,我有我自己的Style,不受父元素影响 ( id 优先于 class,与顺序无关)
</div>
</div>
</form>
</body>
</html>
运行结果图片:
其中令我困惑的是这个:
<a>按Lost_Painting理解,我应该是绿色,但我却是黄色,他很困惑</a><!-- a标签在Opera/IE下都显示是黄色,不知道为什么,BUG? -->
我等下新开个帖子说明,真奇怪了.我修改成Purple(紫色)就正常了.
--------------------编程问答-------------------- 修正:"我等下新开个帖子说明,真奇怪了.我修改成Purple(紫色)就正常了. "
==> 我看眼花了,紫色也一样 --------------------编程问答-------------------- 那么多人顶了，我也顶 --------------------编程问答-------------------- 层叠样式表，层叠。。。。
后面的样式会覆盖前面的样式！ --------------------编程问答-------------------- 如果是同一元素同时使用Style,ID,Class来指定样式.
那么: Style > ID > Class ( > 表示优先 )
如果是不同元素,还需要看元素父层级的样式:
1.子元素自身有样式,以自身的为准.
2.子元素未设定样式,此时如果父元素有定义的话套用父元素的样式否则以默认显示
<div id="content">
content内容| <a href="#">content链接 </a>
<div class="action">action内容| <a href="#">action链接 </a> </div>
</div>
<div id="content">父元素
<div class="action">子元素
<a href="#">子元素 --------------------编程问答-------------------- vrhero说的：
层叠优先级是...
浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式...
其中样式表又有...
类选择器 < 类派生选择器 < ID选择器 < ID派生选择器
派生选择器以前叫上下文选择器，所以完整的层叠优先级是...
浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式...共12个优先级... --------------------编程问答-------------------- 用firebug 看看一些大网站的样式试试 --------------------编程问答-------------------- ID选择器最优先，其次是类选择器，最后才是元素选择器。
CSS 优先级 --------------------编程问答-------------------- UP! --------------------编程问答-------------------- content就应该是灰色吧！个人觉得也是按先后顺序 --------------------编程问答-------------------- 是按执行顺序，content你设置的颜色就是灰色，执行到action是你把颜色设成了红色，所以结果是正确的 --------------------编程问答-------------------- 学习 --------------------编程问答-------------------- 这个应该是就近吧，看哪个最近了。 --------------------编程问答-------------------- 这不是优先级的问题，而是层次的问题，所以CSS叫做层叠样式表
最里层的CSS会覆盖外层的CSS
顺序都是外层的先起作用，里层的再起作用，如果里层和外层都对同一个属性样式做了定义，则里层的样式覆盖外层的样式
补充：.NET技术 , ASP.NET
