2

我有一个情况，我在 a.menu内有 a #header，当我.menu通过像这样的 css 选择器访问 的孩子时.menu a，它使用的是 the #header a。

我期待.menu a覆盖，#header a因为它更接近a元素。为什么没有发生这种情况？我假设它具有与基于以下示例的 id 相比的类。

在示例中，是否有一种在不限制父样式的情况下覆盖#red spancss的好方法？.blue span

“好方法”我想我的意思是灵活。例如.blue，可能是一个由 php 框架创建的元素，它在许多地方使用（可能不在一个 id 样式的父元素内，或者可能不在一个不同 id 样式的父元素内）。

这是一个例子。除了#green仍然是红色的：

HTML：

<div id="red">
    <span>red</span>
    <div class="blue">
        <span>blue(class) - should be blue</span>
    </div>
    <div id="green">
        <span>green(id) - should be green</span>
    </div>
    <div class="green">
        <span>green(class) - should be green</span>
    </div>
    <div>
        <span>no child div style - should still be red</span>
    </div>
</div>

CSS：

#red span {
    color: red;
}
.blue span {
    color: blue;
}
.green, #green span {
    color: green;
}
4

4 回答 4

2

应用 CSS 规则（不带!important）的优先级是：

  1. 选择器中的 ID 数量。如果画，
  2. 属性和类的数量。如果画，
  3. 名称或伪元素。如果画，
  4. CSS 文件的最后一个声明。当然，这从不吸引人。

由于#red span有一个 ID，并且.green没有任何ID，因此#red span适用。

有关首先应用哪个 CSS 规则的进一步说明，请查看关于粉碎杂志的这篇精彩文章

要解决此问题，您可以使用更具体的规则。这样它就与第一名并列，但由于它有额外的课程，所以你的规则会因第二名而获胜。

于 2013-10-07T00:13:23.153 回答
1

最简单最干净的：

http://jsfiddle.net/f4ke2/7/

#red {
    color: red;
}
.blue span {
    color: blue;
}
.green, #green span {
    color: green;
}

或者如果你这样做怎么办？:)

#red > span {
    color: red;
}

或者

 #red .blue span {color: blue;}

或者

.blue span {
    color: blue !important;
}

或“灵活性”

#red .blue span, .blue span, #someotherID .blue span {color: blue;}

或者像这样可怕的东西

var id = $("#red");
id.addClass(id.attr("id")).removeAttr("id");
于 2013-10-07T00:22:57.980 回答
1

选择器特异性规定 id 优先于类。尽管在 Cascade 中蓝色类在红色之后，但由于特殊性，红色优先。#red .blue span如果需要，您可以使用选择器

于 2013-10-07T00:10:30.080 回答
0

如果您正在使用按类为元素分配属性的样式表（在框架中或其他方式中），即使用类选择器，您只需在编写其他 CSS 规则时考虑到这一点。所以这是一个规范编码（HTML 和 CSS）的问题，而不是使用一些技巧来摆脱正常的 CSS 原则。

基本上，只在那些你想要影响的元素上设置属性，而不使用覆盖范围太广的选择器。比如说，如果您想将某个元素内的文本设置为红色，color: red请仅在该元素上设置，而不是在其后代上设置，除非您真的想覆盖它们可能具有的任何设置。

例如，如果有一个带有 的样式表.foo { color: blue }，那么这将影响 class 中的任何元素foo，除非根据 CSS 级联被另一个规则覆盖。因此，如果您不希望它在类似的情况下被覆盖<div id=xxx>...<span class=foo>...</span>...</div>，您就无法设置#xxx span { color: red }，因为那样您将通过更具体的选择器覆盖规则。从这个意义上说，使用#xxx { color: red }是安全的，因为span（具有其颜色集）不会继承其父级的颜色。

使用!importantas in.foo { color: blue !important }似乎可以解决问题，但!important会使样式表难以管理和维护。当您需要一个工具来覆盖特异性效果但又不能时，它也会产生问题，因为您已经发射了武器。该规则.foo { color: blue !important }对#xxx span { color: red !important }.

于 2013-10-07T05:23:38.217 回答