[转]CSS基础知识之选择器特殊性与重要性

<header>
  <nav class="nav-main" id="navigation">Here background</nav>
</header>

header nav {
  background-color: red;
}

#navigation {
  background-color: green;
}

.nav-main {
  background-color: blue;
}

div ul li              /* 0,0,0,3    3个元素选择器 */

div.aside ol li        /* 0,0,1,3    1个类选择器，3个元素选择器 */

a:hover                /* 0,0,1,1    1个伪类选择器，1个元素选择器 */

div.navlinks a:hover   /* 0,0,2,2    1个类选择器，1个伪类选择器，2个元素选择器 */

.affix.top             /* 0,0,2,0    多类选择器 注 */

input[type="text"]     /* 0,0,1,1    1个属性选择器，1个元素选择器 */

input[name="sex"][type="radio"]
                       /* 0,0,2,1    2个属性选择器，1个元素选择器 */

#title em              /* 0,1,0,1    1个 ID 选择器，1个元素选择器 */

h1#title em            /* 0,1,0,2    1个 ID 选择器，2个元素选择器 */

*                      /* 0,0,0,0    1个通用选择器 */

<nav style="background-color: gray;"></nav> <!-- 1,0,0,0 -->

.nav-main {
  background-color: blue !important;
  color: #666;
}

<div id="gohome"><a href="/" id="home">Home</a></div>

div#gohome a#home {
  color: red;
}

div a {
  color: green !important;
}

div#gohome a#home {
  color: red !important;
}

div a {
  color: green !important;
}

.header {
  color: red !important;     /* 标准浏览器 red */
  color: green;              /* IE6 green !important 失效 */
}

.header {
  color: red !important ie;     /* ie6/7 red */
}