Question

我有一堆带有一堆规则的CSS。我发现这些规则与我的应用程序的其他部分相冲突。解决方案是使这些规则仅对某个id的后代（直接或非直接）有效：

<div id="thisOne">
    <!-- the CSS rules should be active ONLY here -->
</div>

#thisOne p { color: red; }

但是在CSS文件中使用#thisOne选择器之前的所有规则（数十个！）之前会非常难看。还有更好的方法吗？

Answer 1

您始终可以应用具有样式属性的自定义类，因此它不依赖于ID或组件本身。例如，这可能是您的选择（也可以在整个应用程序中重复使用）：

<强> CSS

.text-gray { color: gray; }
.text-blue { color: blue; }
.nav { list-style: none; padding-left: 0; }
.nav > li > a { color: green; }
#thisOne .nav > li > a { color: red; }

<强> HTML

<div id="thisOne">
  <div class="text-gray">Navigation</div>
  <ul class="nav">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
  <p class="text-blue">Come check out my new site here!</p>
</div>

如果你想在你的CSS前面加上ID选择器，那么使用CSS预处理器会很适合你。 CSS预处理器将帮助您减少必须编写的代码。下面是如何在预处理器中编写代码以及如何编译代码的快速示例。

#thisOne {
  p { color: green; }
  ul {
    list-style: none;
    padding-left: 0;
    > li {
      float: left;
      > a { color: red; }
    } 
  } 
}

上面编译为纯CSS ...

#thisOne p { color: green; }
#thisOne ul { 
  list-style: none;
  padding-left: 0;
}
#thisOne ul > li { float: left; }
#thisOne ul > li > a { color: red; }

根据您的开发环境，不同的预处理器可能更适合该项目。它们都非常相似，我认为阅读它们甚至开始使用它们可能会很有趣。

Answer 2

我使用Less, a CSS pre-processor来帮助解决这些问题。我还使用了一个名为Crunch的软件。但是，它可以从here下载。

为了让您知道它是如何运作的，让我们举个例子。

少于（在编译之前）

#thisOne {
    p {
        color:red;
    }
}

然后，您可以根据需要添加到规则中。即：

#thisOne {
    width:300px;
    margin-left:50px;
    h1 {
        font-weight:lighter;
        color:blue;
    }
    p {
        color:red;
    }
}

你可以做更多的事情。看看这个。我成了皈依者。

Answer 3

您可以使用jQuery将“Class”添加到“thisOne”div中的所有p元素：

$("#thisOne p").addClass("redItem");

然后从css：

更改它

.redItem { color: red; }

Answer 4

这并不完全理想，但如果每个元素都有一些标识符，你实际上可以在一个规则集上堆叠多个选择器（用逗号分隔）：

#thisOne *,
#thatOne *,
#anotherOne *,
#two *
{
    color: red;
}

或者，如果您只想要元素的直接孩子：

#thisOne > *,
#thatOne > *,
#anotherOne > *,
#two > *
{
    color: red;
}

*是CSS中的一个catch，它将匹配任何元素，因此#thisOne *将选择ID为“thisOne”的元素的所有子元素。

它不是那么精彩的自动化，但它节省了大量空间（你可以通过将它们全部放在一行来节省更多空间）并且意味着每次更改时都不必更新许多规则。

使CSS文件中的所有规则仅适用于id的后代

4 个答案: