-1

我有以下 CSS（在页面最后加载）

.dropdown-menu-normal:hover,
.dropdown-menu-normal a:hover
{
    background: transparent!important;
    color: #5cac7c;
    text-decoration: underline!important;
    text-align: right;
    float: right;
}

.dropdown-menu-normal,
.dropdown-menu-normal a
{
    color: #5cac7c!important;
    text-align: right;
    float: right;
}

此类应用于标准引导下拉菜单中的 LI 元素。

这设置了下拉菜单项的样式，就像在菜单中浮动的普通链接一样。现在，如果没有 !important 标志，我无法正确使用选择器来使用此 CSS 任何人都可以帮忙吗？

我知道我可以用它来运行，但我真的很讨厌必须使用 !important 来处理我应该能够直接替换的东西。

jsFiddle 使用 !important http://jsfiddle.net/y67qP/

jsFiddle 没有http://jsfiddle.net/y67qP/1/

4

2 回答 2

2

CSS 中的特异性以四个整数 (0,0,0,0) 开始

Inline style == first number

Id == Second number

Attribute selectors and Pseudo-classes, Classes == Third

Type selectors == Fourth

您只需要弄清楚bootstrap.css文件中选择器的特殊性。

目前，常规状态的具体值为 12（一类 - 两个元素）

.dropdown-menu > li > a== 12

你.dropdown-menu-normal, .dropdown-menu-normal a的 == 10 / 11 分别

为了使常规状态正常工作，使您的选择器更加具体，例如：

ul .dropdown-menu-normal, ul .dropdown-menu-normal a这似乎有效。

对于悬停，只需遵循相同的概念，您将覆盖它。

这是一个例子

于 2013-03-01T16:30:06.297 回答
1

为了避免必须使用重要，您应该使您的选择器更具体，即进一步向后移动 DOM 以获得该特定元素的更准确的精度

例如，.dropdown-menu您可以从 etc 开始，.dropdown .dropdown-menu然后在需要时进一步向上移动。

于 2013-03-01T15:58:43.717 回答