css - 上下文相关的 CSS 样式

Question

我在 .css 文件中指定特定样式时遇到问题。我希望 h1 具有基于其所在的 div 的上下文相关样式

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

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

如果像这样的标签位于 class="A"的 div 中，那么我希望它具有 A 的样式，无论 class="B"是否以不同方式定义它。

在 .css 文件中将 B 放在 A 之后之前，此代码一直有效。然后 B 赢得了风格大战。

<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

是因为.B h1, p

这指定了所有与 .B 类无关的 P，并且因为 .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/