上下文感知CSS风格

Question

在我的.css文件中指定特定的样式有困难。我希望h1具有一个基于div的上下文敏感样式

我还试图避免使用/过度使用！的重要性，并使用#id对每个实例进行调整。如果我必须使用！重要或#id对每一种样式，我认为它最好是按行完成。简而言之，我想要基于标签的不同样式。

So...given class="A“和class="B”

如果一个标签class="A“位于div中，那么我希望它具有A的样式，而不管class="B”对它的定义是否不同。

这段代码可以工作，直到B被放在.css文件中的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类无关的所有Ps，并且因为.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小提琴：http://jsfiddle.net/uadkrj9u/

Answer 2

我在代码中看到的唯一冲突是'p‘标签在底部被重新样式化了。在那里有逗号意味着它现在与'.B‘无关，并且将重新命名，因为它的位置从'.A p’开始。所以你需要：

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

以确保

不受其他班级的影响。这将是低代码“破坏”的唯一东西。

Answer 3

这取决于特异性的概念。

您可以解决这个问题，例如，在定义为!important的每个属性之后追加.A

.A
{
   some styles !important
}

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

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

或者，在容器DIV上再添加一个css类，并通过这个额外的类使.A后代规则更加具体。

<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类定义的规则比在.B上定义的规则更具体。