小記：css特殊性

今天早上遇到了個小bug，恰好用從css權威指南學到的知識解決了

html結構

<ul class="portlet-nav">
        <li><a id="portlet-1">Tab 1</a></li>
        <li><a id="portlet-2">Tab 2</a></li>
        <li><a id="portlet-3">Tab 3</a></li>
</ul>

css樣式

.portlet-nav a {
        color: #fff;
        text-decoration: none;
        display: block;
        padding: 7px 10px 9px 10px;
        margin-top: 4px;
        margin-left: 1px;
        background-color: #8e44ad;
}

.portlet-nav a:hover {
        color: #000;
        background-color: #fff;
        cursor: pointer;
 }

效果就是這樣

沒錯，就是一個簡單的tab切換而已

那麼此處遇到的問題是這樣的

我但願點擊相應的tab時就選中這個tab，同時高亮，因此

target.className="portlet-active";

對應的css代碼

.portlet-active{
        color:#000;
        background-color: #fff;
        cursor: auto;
 }

然而，當我實際操做的時候，發現樣式並沒生效，明明class已經加上去了

忽然想起早兩天看的權威指南，此處css樣式上a的定義是這樣的

.portlet-nav a

因此a對應的特殊性是 0 0 1 1

而咱們新增的css樣式active則是

.portlet-active

它的特殊性則是 0 0 1 0

因此相比之下，它的特殊性拼不過a本來的樣式，根據層疊，因此即便加了active這個class，最終顯示的樣式仍是本來的樣式，因此，爲了此處的正確顯示，咱們的active應該這樣寫

.portlet-nav .portlet-active

這樣它的特殊性就變成了 0 0 2 0，問題得以解決。