Jquery CSS：可以用另一个类重写一个类吗？_Jquery_Html_Css

Jquery CSS：可以用另一个类重写一个类吗？

jquery html css

Jquery CSS：可以用另一个类重写一个类吗？,jquery,html,css,Jquery,Html,Css,我有一个模板类，就是： .template{ display: none; } 这允许我用html创建一个块，我可以使用jQuery克隆它，并根据自己的喜好进行轻微编辑。但是，我分配给要克隆的同一元素的一个类设置： .Category{ display:table-row-group; //other properties not related to this problem not shown } .Category{ display:table-row-grou

我有一个模板类，就是：

.template{
  display: none;    
}

这允许我用html创建一个块，我可以使用jQuery克隆它，并根据自己的喜好进行轻微编辑。但是，我分配给要克隆的同一元素的一个类设置：

.Category{
  display:table-row-group;
  //other properties not related to this problem not shown
}

.Category{
  display:table-row-group;
  //other properties not related to this problem not shown
}

这最终会覆盖template display属性，这破坏了将其作为模板类的整个目的

当然，我可以在克隆后通过jQuery删除模板类的同时添加Category类，但这并不理想，因为html应该易于编辑，可以在那里而不是在jQuery代码中进行更改

想法？我在想也许我可以告诉display覆盖其他属性或类似的东西

谢谢大家!

这正是

！重要的是

does；将其添加到您的价值中。

添加！对.类别很重要

或者干脆用！重要的

.template {
  display: none !important;
}

有两种选择：

推荐：CSS中类定义的顺序非常重要，请确保您真正想要的类位于其他类之后

不推荐：使用

！重要提示

在句末不建议使用此选项，因为如果您需要在之后覆盖此选项，则会更加复杂

CSS有一个非常明确的优先级顺序

如果两个选择器具有相同的优先级（根据您的两个单一类选择器），那么在所有其他选择器相同的情况下，CSS代码中最后定义的选择器就是具有优先级的选择器

因此，这里的简单解决方案是移动模板CSS以降低CSS代码

如果出于任何原因不能这样做，最好的选择是使模板选择器更具体。例如，如果您的所有模板元素都包含在一个div元素中，并且您知道这总是正确的，那么您可以将选择器更改为

div.template

。它现在比

.Category

选择器更具体，因此应优先使用

最后，您始终可以选择

！重要信息

。如果可能的话，我尽量避免使用它，因为如果过度使用它往往会导致问题，但它适用于需要它的情况，事实上，像这样的情况是

最合理的使用情况！重要信息

我能想到。

要快速解决问题，您只需将css规则变得更加具体：

body .Category{
  display:table-row-group;
 //other properties not related to this problem not shown
}

假设您有以下代码：

<html>
<head>
  <style>
    div{background-color:#ccc} 
    #content .Category{display:block;}
    .template{display:none;}
    .otherdiv{background-color:red;}
    body .otherdiv{background-color:green;}
</style>
</head>
<body>
  <div id="content">
    <div class="template Category" >inner template div</div>
  </div>
  <div class="template">outer template div</div>
  <div class="otherdiv">outer other div</div>
</body>
</html>


div{背景色：#ccc}
#content.Category{display:block；}
.template{显示：无；}
.otherdiv{背景色：红色；}
body.otherdiv{背景色：绿色；}
内模板div
外模板分区
外其他分区

内部模板div

将显示为bloc，但外部模板div将不显示

css规则越具体，它们就越“自然重要”。在我的代码中，div

.otherdiv

将显示为绿色的backgroupd，因为

正文.otherdiv

比

.otherdiv

更重要

请参阅那篇关于css特性的文章

从0开始，为样式属性添加1000，为每个ID添加100，为每个属性、类或伪类添加10，为每个元素名称或伪元素添加1

使用

！重要信息

不建议使用，并且并非所有浏览器都支持此功能

不要使用

display:none

隐藏模板。相反，将它们放在

标记中，或者更具体地使用

文本/x把手

等来定义模板的实际类型。

显示：无！重要的要清楚，我想显示：没有覆盖任何其他显示属性，我认为这是重要的。一旦模板被删除。哦，我的坏。。我以为！重要的。。表示“不重要”，类似于！=，意味着它将被覆盖。看起来很完美，谢谢！您不能添加！重要信息，如所问的CSS类。
<html>
<head>
  <style>
    div{background-color:#ccc} 
    #content .Category{display:block;}
    .template{display:none;}
    .otherdiv{background-color:red;}
    body .otherdiv{background-color:green;}
</style>
</head>
<body>
  <div id="content">
    <div class="template Category" >inner template div</div>
  </div>
  <div class="template">outer template div</div>
  <div class="otherdiv">outer other div</div>
</body>
</html>