覆盖id

Question

所以我正在和另外三个程序员（其中两个比我更先进）一起开展一个项目，所以简单地改变结构/名称并不是一个可行的解决方案。

我们有一个名为head_subhead的ID，其中应用了一些样式。

所有页面都使用此模板（它在Drupal中），因此所有页面都在结构中有head_subhead。

我想，对于特定页面覆盖#head_subhead。

我想在不向页面主体或更高元素添加id的情况下执行此操作。我可以通过增加一个额外的课程吗？我可以使用已经应用于页面主体的类（即.pagename #head_subhead）还是没用？

在不使用!important

的情况下，覆盖#head_subhead的最有效方法是什么

Answer 1

  

我可以使用已经应用于页面主体的类

是的，如果您只定位该页面，则可以。

.page_body_class #head_subhead { /* CSS */ }

如果父div对您希望css影响的页面/页面是唯一的，也可以定位父div。

.some_parent_div_class #head_subhead { /* CSS */ }

但是如果你经常使用它，只需在head_subhead元素中添加一个类。

#head_subhead.extra_class { /* CSS */ }

Answer 2

不要使用!important覆盖您的样式，您会发现使用id很难处理样式表，与class相比，您的选择器会有更高的偏好。如果要覆盖id，请使用更具体的选择器，例如

#head_subhead .class p {
   styles here
}

将class分配给您要选择的元素，您可以继续添加越来越多的元素，类或ID，以使您的选择器更加具体。

Answer 3

这里的问题是你必须使用更大的特异性。您可以通过在原始css选择器之后调用被覆盖的css选择器来执行此操作，无论它是在同一个文件的下游（为什么），或者在创建原始css选择器之后包含的单独文件中。

或者，您可以使用其他选择器创建更高的特异性，例如：.superclass #id等后代选择器。你可以在你需要特殊样式的页面主体上放一个特殊的类，并将其用作该选择器的.superclass部分。

但实际上，这就是我在css代码中根本不使用id的原因。在任何地方使用课程都是一个更好的解决方案（我知道你说这对你的情况不可行，只是就这个话题给出我的2分意见。）

Answer 4

添加类不会使用技巧ID具有更高的优先级。你甚至可以在这里看到https://stackoverflow.com/tags/css/info。

不使用任何东西只会有一个答案，删除id！其他方法已被您拒绝！例如!IMPORTANT，将ID或类添加到父级。然后删除id以防止它。或者至少使用这个

<element id="@if(condition == true) {<text>head_subhead</text>}"></element>

将if else块应用于仅在某些条件为真时显示id;在您的情况下，这意味着仅在特定页面中显示。

我很抱歉我使用了ASP.NET代码，您可以自己将代码类型更改为您自己的代码类型。并且你将摆脱不需要的id！