[原创]一点心得与一个问题:关于CSS中Style,ID,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理解,套用父元素 .action a ,我应该是绿色,但我却是黄色,他很困惑</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理解,套用父元素 .action a ,我应该是绿色,但我却是黄色,他很困惑</a><!-- a标签在Opera/IE下都显示是黄色,不知道为什么,BUG?  --> "a标签比较特别?span就是正常的.望知情者告知,谢谢.
 

解决方案 »

  1.   

    纠正:"<a>我是紫色的,套用父元素 #content a 定义的Style</a>"
    ==><a>我是黄色的,套用父元素 #content a 定义的Style</a>
      

  2.   

    理解的偏差较远，显然你没有系统地看过CSS文档...不存在“本身无Style”，即使你没有定义浏览器也有一套缺省定义...你不理解的地方也跟A标记无关...层叠优先级是...浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式...其中样式表又有...类选择器 < 类派生选择器 < ID选择器 < ID派生选择器派生选择器以前叫上下文选择器，所以完整的层叠优先级是...浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式...共12个优先级...
      

  3.   

    因为你只定义了content a，它的优先级比action a和action spand都高...
      

  4.   

    还有一点要注意...派生选择器只对容器类标记中的标记起作用...重给你写一个例子，这个比较清楚...
    <html>
    <head>
        <title></title>
        <style type="text/css">
            div { color: #00FF00 }
            .a1 { color: #0000FF }
            .a1 div { color: #00FFFF }
            .a2 { color: #FF0000 }
            #a2 { color: #FFFF00 }
            #a2 div { color: #FF00FF }
        </style>
    </head>
    <body>
      <div>我是绿色，内部样式表优先于浏览器缺省</div>
      <div class="a2">我是红色，类选择器优先于内部样式表</div>
      <div class="a2" id="a2">我是黄色，ID选择器优先于类选择器</div>
      <div class="a1">
          <span>我是蓝色，类选择器优先于内部样式表</span>
          <div>我是青色，类派生选择器优先于类选择器</div>
          <div class="a2">我还是青色，类派生选择器优先于所有类选择器</div>
          <div id="a2">
              <span>我是黄色，ID选择器优先于类派生选择器</span>
              <div>我是紫色，ID派生选择器优先于类派生选择器</div>
              <div class="a1">我还是紫色，ID派生选择器优先于所有类选择器</div>
              <div class="a1" id="a1">我还是紫色，ID派生选择器优先于所有ID选择器</div>
              <div class="a1" id="a1" style="color:#000000;">我是黑色，内联样式驾到闲杂人等退下</div>
          </div>
      </div>
    </body>
    </html>
      

  5.   

    <body>
      <div>我是绿色，内部样式表优先于浏览器缺省</div>
      <div class="a2">我是红色，类选择器优先于内部样式表</div>
      <div class="a2" id="a2">我是黄色，ID选择器优先于类选择器</div>
      <div class="a1">
          <span>我是蓝色，类选择器优先于内部样式表</span>
          <div>我是青色，类派生选择器优先于类选择器</div>
          <div class="a2">我还是青色，类派生选择器优先于所有类选择器</div>
          <div id="a2">
              <span>我是黄色，ID选择器优先于类派生选择器</span>
              <div>我是紫色，ID派生选择器优先于类派生选择器</div>
              <div class="a1">我还是紫色，ID派生选择器优先于所有类选择器</div>
              <div class="a1" id="a1">我还是紫色，ID派生选择器优先于所有ID选择器</div>
              <div class="a1" id="a1" style="color:#000000;">我是黑色，内联样式驾到闲杂人等退下</div>
          </div>
      </div>
    </body>
      

  6.   

    1.理解的偏差较远，显然你没有系统地看过CSS文档...
    确实没有系统,看过,惭愧,呵呵2.不存在“本身无Style”，即使你没有定义浏览器也有一套缺省定义...你不理解的地方也跟A标记无关...
    这个我理解,问中也提及了"否则以默认显示 "3.浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式...
    嗯,这个我了解.
    浏览器缺省:浏览器内置的样式,比如文字默认就显示为#000000
    外部样式表:举例为:<link href="http://c.csdn.net/bbs/t/5/t5.css" rel="stylesheet" type="text/css" />
    内部样式表:页面内定义的<style type="text/css"> ... ...</style>
    内联样式: 元素中定义的 <span style="... ..."> </span>    4.类选择器 < 类派生选择器 < ID选择器 < ID派生选择器
    呃.. 这个也了解.. 呵呵
    类选择器: # <-- 样式表中这个标记开头的
    类派生选择器: #XXXX span <-- 样式表中以 "#"开头 后续接着的 html元素标签
    ID选择器: . <-- 样式表中这个标记开头的
    ID派生选择器: .id span <-- 样式表中以 "."开头 后续接着的 html元素标签    5.浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式...共12个优先级...
    学习了,这个我没有理解的透彻... ... 所以才会产生疑问,呵呵,多谢指出.
      

  7.   

    这里,即使我定义成 <style type="text/css">
            #content
            {
                color: Blue; /*蓝色*/
            }
            #content a, span, b, i
            {
                color: Yellow; /*黄色*/
            }
            .action
            {
                color: Red; /*红色*/
            }
            .action a, span, b, i
            {
                color: Green; /*绿色*/
            }
            #other
            {
                color: Pink; /*粉红*/
            }
        </style>#content a, span, b, i
    .action a, span, b, i
    其中
    a仍旧是黄色
    其他的span, b, i仍旧是绿色.    而我把 .action a, span, b, i 去掉
     <style type="text/css">
            #content
            {
                color: Blue; /*蓝色*/
            }
            #content a, span, b, i
            {
                color: Yellow; /*黄色*/
            }
            .action
            {
                color: Red; /*红色*/
            }
            #other
            {
                color: Pink; /*粉红*/
            }
        </style>
    此时, a 依旧是黄色, span , b 标记变成了 黄色,这是为什么呢?
    a标记为什么那么特殊呢?
    vrhero可以把我的过程模拟一遍,一定要增加 a 标记哦.谢谢了,麻烦测试完毕告知一下原因
      

  8.   

    内部样式表ID派生选择器 的优先级仅次于 内联样式...你怎么改，#content a都优先...至于b和i，你怎么写的？注意6楼的补充说明，派生选择器只对容器类标记中的标记起作用...
      

  9.   

    hehe,刚出去吃个饭回来,再瞄一下你说的,当即明白了
    刚才我在人生的道路上迷失了.
    因为
    #content a, span, b, i
    {
      ... ...
    }
    相当于==>
    #content a
    {
     ... ...
    }
    span, b, i
    {
      ... ...
    }低级错误... .... 
    一失足成千古风流人物
      

  10.   

    hehe,刚出去吃个饭回来,再瞄一下你说的,当即明白了
    刚才我在人生的道路上迷失了.
    因为
    #content a, span, b, i
    {
      ... ...
    }
    相当于==>
    #content a
    {
    ... ...
    }
    span, b, i
    {
      ... ...
    }低级错误... ....
    一失足成千古风流人物    引用 20 楼 vrhero 的回复:
    内部样式表ID派生选择器 的优先级仅次于 内联样式...你怎么改，#content a都优先...至于b和i，你怎么写的？注意6楼的补充说明，派生选择器只对容器类标记中的标记起作用...[/Quote]
      

  11.   

    结贴. 感谢vrhero的回答,解惑了.
      

  12.   

    你这个写法有错误#content a, span, b, i
    相当于
    #content a {}
    span {}
    b {}
    i {}而不是
    #content a {}
    #content span {}
    .....action a, span, b, i
    这个同理
    .action a {}
    span {}
    b {}
    i {}所以你后面定义的span/b/i 覆盖了前面的定义
    而对于#content a和.action a就是id高于类了
      

  13.   

    我只知道如果要定义a的颜色的话。要定义a:link,a:visited,a:hover,a:active中的一个或多个并且在处于哪个状态的时候才会起作用