仅在表内设置类的样式

Question

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

我想只在<table class="tabelle">内更改类"cbFormFieldCell"的样式。在表外，其他元素不得更改。

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

这适用于网站的每个类别。但是有些物体坏了。

有没有可能做这样的事情：

仅更改表中预定义的class="cbFormFieldCell"元素class="tabelle"？

例如

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

谁能帮忙？

Answer 1

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

希望这可以帮助您了解如何定位元素。

.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 2

你可以像这样使用 css ！important。

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

"！important"使CSS属性成为第一级

Answer 3

你通过编写没有空格的类来连接类，这基本上意味着 .tabelle.cbFormFieldCell将应用于同时具有这两个类的元素。

为了定位.tabelle内部的.cbFormFieldCell，请在它们之间添加一个空格，如下所示.tabelle .cbFormFieldCell .

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

Answer 4

谢谢大家！

我实际上不得不删除空格，使用重要并另外使用另一个默认类。

.cbFormTableEvenRow .cbFormFieldCell{ min-width： 100px ！important; max-width： 100px ！important; width： 100px ！important; overflow： hidden ！important; }