仅在 table 内设置 class 样式

Question

我正在使用带有预定义 classes (cbFormFieldCell) 的 CMS。所以我无法更改某些 class 元素，因为它们在网站的其他部分使用。如果我更改每个元素的格式 class 网站就会损坏。

我只想在 <table class="tabelle"> 中更改 class "cbFormFieldCell" 的样式。 table 之外的其他元素可能不会更改。

.cbFormFieldCell { min-width: 300px; max-width: 300px; overflow: hidden;}

这适用于网站的每个 class。但是有些东西坏了。

是否可以这样做：

仅更改 table 中的预定义 class="cbFormFieldCell" 元素 class="tabelle"?

例如

.tabelle.cbFormFieldCell 
{ min-width: 300px; max-width: 300px; overflow: hidden; }

有人能帮忙吗？

Answer 1

您可以像这样使用 css !important

.cbFormFieldCell { min-width: 300px !important; max-width: 300px !important; overflow: hidden !important;}

"!important" 使 css 属性成为 first-level

Answer 2

您通过不写 space 来连接类，这基本上意味着 .tabelle.cbFormFieldCell 将应用于具有 BOTH 和类.

的元素

为了在 .cbFormFieldCell .tabelle 内部添加一个 space，像这样 .tabelle .cbFormFieldCell。

或者如果它是 .tabelle 的直接子代，您可以像这样使用后代选择器 .tabelle > .cbFormFieldCell

Answer 3

您的 CSS 类之间的 'space' 用于定位不同的元素。您将在下面找到一个示例，当您将类不带或带空格组合在一起时会发生什么。

希望这能帮助您了解如何定位您的元素。

.parent-1 .child {
  color: green;
}

.parent-2.child {
  color: red;
}


/* addition styling */

p {
  padding: 20px;
  background-color: #eff0f1;
  border-radius: 10px;
}

<!-- Without container -->
<p class="child">No CSS rules are applied here.</p>

<!-- With containers -->
<div class="parent-1">
  <p class="child">This will be targeted: green</p>
</div>

<div class="parent-2">
  <p class="child">No CSS rules are applied here.</p>
</div>


<div class="parent-2 child">
  <p class="child">This will be targeted: red</p>
</div>

Answer 4

谢谢大家！

实际上我不得不删除 space，使用 important 并另外使用另一个默认值 class。

.cbFormTableEvenRow.cbFormFieldCell { min-width: 100px !important; max-width: 100px !important;宽度：100px ！重要；溢出：隐藏！重要； }

仅在 table 内设置 class 样式

Style a class only inside a table

css

class

styles

content-management-system

predefined-variables