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

Question

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

我是否误解了 CSS 规则？我认为稍后定义的功能在较低级别会覆盖顶层（例如，内联样式将始终覆盖 style.css 样式）。我附上了 Firebug 的屏幕截图，显示删除了第 275 行定义的字体大小，以支持父 DOM 对象上第 225 行定义的样式。

我的 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 特异性：

• http://www.htmldog.com/guides/cssadvanced/specificity/
• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
• http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
• http://css-tricks.com/specifics-on-css-specificity/

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

Answer 4

这是一个特异性计算器，您可以将其添加为浏览器中的书签：http://www.westciv.com/mri/

当你点击它时，它会打开一个窗口，你可以在其中输入一个选择器，或者你可以点击页面上的一个元素，它会建议你应该使用的选择器（显示你获取的路径那里）。

作为学习工具可能会有所帮助。