Question

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

中的div的上下文敏感样式

我也试图避免使用！重要和使用#id对每个实例进行过度使用。如果我必须为每种风格使用！important或#id，我认为它也可以在线上完成。简而言之，我想根据标签所在的标签来设置不同的样式。

所以......给定class =“A”和class =“B”

如果某个标签位于div =“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

这指定所有Ps不是与.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 fiddle：http://jsfiddle.net/uadkrj9u/

Answer 2

我在代码中看到的唯一冲突是'p'标签在底部重新设置。在那里使用逗号意味着它现在与'.B'无关，并且将重新设置，因为它的位置来自'.A p'。所以你需要：

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

确保

不受其他类的影响。这将是低级代码'破坏'的唯一原因。

Answer 3

取决于Specificity概念。

您可以解决此问题，例如，在定义为!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上定义的规则更具体

Answer 4

您的引号搞砸了，我的浏览器没有呈现。从技术上讲，你的风格都不是来自你给我的代码。否则他们会，尽管样式表中存在B，因为HTML / CSS支持元素的最特定样式。

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

http://jsfiddle.net/8gha671d/

其他答案中的人都说P可能会导致问题，但由于您已经有.A p {}，因此通用p {}不会覆盖它，因为它不太具体。

Answer 5

您还可以通过将元素放在具有特定类的父div中来添加特异性。更多特异性将覆盖样式而无需使用that._append(query, suggestions.slice(0, that.limit - rendered));或使用ID（尽管这种方法没有任何问题，除非您需要使用多个）

!important

上下文敏感的CSS样式

5 个答案: