CSS选择器优先级问题

今天写JQuery的时候遇到了一个问题，让我对CSS选择器的优先级有了进一步的重视：

一.问题的发生

1.看过我前一个博客的人知道我用JQuery写了一个竖排的Tab，后期我试着将Tab的body用iframe引用，所以我"标签1下的内容"变成了iframe，代码如下：

<div id="tab_area" class="tab_area_style">
    <iframe class="content_area" src="content1.html" frameborder="0" >
    </iframe>
<div>标签2下内容</div>

<div>标签3下内容</div>

2.改过之后实际上很简单的鼠标over页签1时iframe引入的content1.html就应该显示(content1.html很简单，只有hello world一句话)，但很奇怪，就是不显示，后来我查询了css.

#tab_area  * {    ------------------------------->意思是id为tab_area下的所有标签的CSS样式
    width:600px;
    height:100px;
    background-color:red;
    border-top:0px;
    color:white;
    display:none;
    margin-top:2px;
}
.content_area {  ------------------------------->意思是为iframe指定特别的样式，覆盖上面CSS中的display:none为display:block

    display:block;
}

3.可是结果是iframe出不来，用firedebug看了一下，CSS解析的结果为：display:block被覆盖

#tab_area * {

     background-color :  red ;

     border-top :  0 none ;

     color :  white ;

     display :  none ;

     height :  100px ;

     margin-top :  2px ;

     width :  600px ;

}

                         tab.css (第 47 行)

.content_area {

     display :  block ;

}

二,问题的解决

1.首先很显然是CSS选择器的优先级问题

2.我们一般都会清楚 特别指定优先级>通配符优先级  ，例如 .class > *,按这个原则不可能出现上述问题

3.但大家会很注意另一个重要的原则  ID>.Class 么？   也就是上述的  #tab_area * >.content_area

4.所以将#tab_area 改成了CLASS的表达形式，firedebug结果如下：

.content_area {

     display :  block ;

}

                      tab.css (第 56 行)

.tab_area_style * {

     background-color :  red ;

     border-top :  0 none ;

     color :  white ;

     display :  none ;

     height :  100px ;

     margin-top :  2px ;

     width :  600px ;

}

5.搞定了，以后对CSS的选择器优先级问题一定要重视！！