上下文相关 CSS 样式

Question

我在 .css 文件中指定特定样式时遇到问题。我希望 h1 具有基于 div 其 in

的上下文相关样式

我也在尝试避免 !important 的 use/overuse 并用 #id 标记每个实例。如果我必须为每种样式使用 !important 或 #id，我认为它也可以在线完成。简而言之，我想要基于标签所在标签的不同样式。

所以...给定 class="A" 和 class="B"

如果像这样的标签在 div 中并且 class="A" 那么我希望它具有 A 的样式，而不管 class="B" 定义不同。

在 .css 文件中将 B 放在 A 之后之前，此代码一直有效。那么 B 赢得样式 war.

<div class="A">
                <h1>some text right aligned</h1>
                <p> some text left aligned</p>
</div>


.A
{
   some styles
}

.A h1
{
     text-align: right;
}

.A p
{
    text-align: left;
}

这破坏了上面的内容

.B
{
    some styles
}

.B h1, p
{
   text-align: center;
}

Answer 1

这取决于Specificity 概念。

你可以解决这个问题，例如，在定义为 .A

的每个属性后附加 !important

.A
{
   some styles !important
}

.A h1
{
     text-align: right !important;
}

.A p
{
    text-align: left !important;
}

或者在容器 DIV 上再添加一个 css class 并使 .A 后代规则更加具体，这要归功于这个额外的 class.

<div class="high A">
     <h1>some text right aligned</h1>
     <p> some text left aligned</p>
</div>


.high.A
{
   some styles
}

.high.A h1
{
     text-align: right;
}

.high.A p
{
    text-align: left;
}


.B
{
    some styles
}

.B h1, p
{
   text-align: center;
}

这样，为 .A class 定义的规则比 .B

定义的规则更具体

Answer 2

因为.B h1, p

这指定了所有 Ps 而不是 Ps 与 .B class 相关，并且因为 .B 最后被声明它覆盖了以前的样式。

操作方法如下：

<div class="a">
    <h1>right-aligned text</h1>
    <p>left-aligned text</p>
</div>

<div class="b">
    <h1>center-aligned text</h1>
    <p>center-aligned text</p>
</div>

和css：

.a h1 { text-align: right; }
.a. p { text-align: left; }
.b h1, .b p { text-align: center; }

js fiddle: http://jsfiddle.net/uadkrj9u/

Answer 3

我看到的与您的代码唯一的冲突是 'p' 标记在底部重新设置了样式。有逗号意味着它现在与'.B'无关，并且将被重新设计，因为它的位置来自'.A p'。所以你需要：

.B h1, .B p
{
text-align: center;
}

确保

不受另一个 class 的影响。那将是唯一的较低代码 'destroys'.

Answer 4

你的引号乱七八糟，我的浏览器无法显示。从技术上讲，none 你的风格来自你给我的代码。否则他们会，尽管 B 存在于样式表中，因为 HTML/CSS 支持元素的最具体样式。

<div class=”A”>
<div class="A">

http://jsfiddle.net/8gha671d/

其他答案中的人说 P 可能会导致问题，但因为您已经有 .A p {}，所以更笼统的 p {} 不会覆盖它，因为它不太具体。

Answer 5

您还可以通过将元素放在具有特定 class 的父元素 div 中来添加特定性。更具体将覆盖样式而无需使用 !important 或使用 ID（尽管这种方法没有任何问题，除非您需要使用多个）

<style>
    .parent-div .A {
        ...
    }
</style>

<div class="parent-div">
    <div class=”A”>
                <h1>some text right aligned</h1>
                <p> some text left aligned</p>
    </div>
<div>

上下文相关 CSS 样式

Context Senstive CSS Style

css

inheritance

overriding