Question

我想弄清楚我是否完全误解了一些事情。我有一个菜单和子菜单（仅使用CSS，没有javascript的下拉样式），由于某种原因，子菜单样式（由.submenu li a定义）始终显示与父a相同的样式（由#menu定义） li a）即使子菜单CSS样式显示在顶部菜单样式之后。

我是否误解了CSS规则？我认为功能定义为LATER并且在较低级别覆盖顶级（例如，内联样式将始终覆盖style.css样式）。我在Firebug上附上了一个屏幕截图，它显示了在第275行定义的字体大小，而不是父级DOM对象上第225行定义的样式。

firebug screenshot

我的DOM看起来像是为了简化它：

<ul id="menu">
    <li>
        <a href="http://themes.brixwork.com/westend/about-us">about us</a>
        <ul class="submenu">
            <li>
                <a href="http://themes.brixwork.com/westend/testimonials">Testimonials</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="http://themes.brixwork.com/westend/listings">listings</a>
    </li>
    <li>
        <a href="http://themes.brixwork.com/westend/mls-search">MLS&reg; Search</a>
    </li>
    <li>
        <a href="http://themes.brixwork.com/westend/city-guide">City Guide</a>
        <ul class="submenu">
            <li>
                <a href="http://themes.brixwork.com/westend/city-guide/7/the-west-end-vancouver">The West End</a>
            </li>
            <li>
                <a href="http://themes.brixwork.com/westend/city-guide/8/coal-harbour">Coal Harbour</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="http://themes.brixwork.com/westend/blog">blog</a>
    </li>
</ul>

我的CSS看起来像这样。

#menu li a:link, #menu li a:visited {
    color:#333;
    text-decoration:none;
    font-size:16px;
    font-weight: bold;
    padding-bottom: 3px;
    text-transform: uppercase;
}

#menu li a:hover {
    color:#333;
    background-image: url('../images/pink_dots.png');
    background-position: bottom left;
    background-repeat: repeat-x;
}

#menu li a:active {
    position:relative;
    color:#333;
}

.submenu {
    position:absolute;
    left: -9999px;
    display: block;
    background-color: #DD2D77;
    padding:0px 0px 0px 0px;
    margin: 0px;
    top:16px;
    z-index: 20;
}

#menu li:hover .submenu {
    left: -5px;
}

.submenu li {
    text-align: left !important;
    margin:0px !important;
    padding: 2px 0px 3px 0px !important;
    position:relative;
    display: block;
    width: auto;
    float: none;
    text-align: left;
}

.submenu li:hover {
}

.submenu li a:link, .submenu li a:visited {
    color:#fff;
    text-align: left;
    font-size:12px;
    font-weight: normal;
    margin: 0px;
    white-space:nowrap;
    display: block;
    padding:3px 7px 5px 7px !important;
    min-width: auto;
    zoom: normal;

}

.submenu li a:hover, .submenu li a:active {
    color:#fff !important;
    background-image: none !important;
    background-color: #73AA12;
}

Answer 1

id选择器比其他选择器具有更多特异性。

增加特异性，优于!important。

Answer 2

是;你误解了CSS是如何工作的。

http://www.htmldog.com/guides/cssadvanced/specificity/

在CSS文件中定义规则的顺序没有任何意义。 选择器确定适用的规则和时间。

CSS背后的公理是 - 你的选择器越具体，它们对不太具体的选择就越优先。

这就是锚样式的工作原理。仅在悬停时显示下划线：

a:hover
{
  text-decoration: underline;
}

a
{
  text-decoration: none;
}

即使稍后定义的特定规则较少，更具体的规则（也是鼠标悬停的锚标记）会否决更一般的规则。

Answer 3

你说在级联中稍后宣布的规则优先于，但只有在它们具有相同或更高的特异性时才是正确的。

您的第一个样式#main li a使用ID作为上下文，而第二个样式.submenu li a使用CLASS作为上下文。 ID比CLASS拥有更多特异性，因此它会覆盖.submenu。

您需要阅读一下CSS特性：

你可以快速修复并声明#main > li a - 它只适用于作为#main元素的直接后代的列表项内的锚点。然后，您的.submenu li a规则将应用于您的子菜单项。

Answer 4

以下是一个特殊性计算器，您可以在浏览器中添加为书签：http://www.westciv.com/mri/

单击它时，它将打开一个窗口，您可以键入选择器，也可以单击页面上的元素，它将建议您应该使用的选择器（显示获取的路径）有）。

它可能有助于作为一种学习工具。

一个样式表中的CSS级联顺序

4 个答案: