仅在表格内设置类的样式答案

【问题标题】：Style a class only inside a table仅在表格内设置类的样式
【发布时间】：2019-07-11 12:43:28
【问题描述】：

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

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

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

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

是否可以这样做：

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

例如

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

谁能帮忙？

【问题讨论】：

.tabelle.cbFormFieldCell 将选择具有两个类的元素。您需要在两者之间留一个空格来选择 .tabelle 元素中的 .cbFormFieldCell 元素：.tabelle .cbFormFieldCell

标签： css class styles content-management-system predefined-variables

【解决方案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>

【讨论】：

【解决方案2】：

你可以像这样使用 css !important

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

"!important" 使css属性成为一级

【讨论】：

【解决方案3】：

您通过不带空格的方式编写类来连接类，这基本上意味着 .tabelle.cbFormFieldCell 将应用于具有 BOTH 那些类的元素。

为了定位.cbFormFieldCell inside of .tabelle，在它们之间添加一个空格，如下所示.tabelle .cbFormFieldCell。

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

【讨论】：

【解决方案4】：

谢谢大家！

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

.cbFormTableEvenRow .cbFormFieldCell { 最小宽度：100px !important;最大宽度：100 像素！重要；宽度：100 像素！重要；溢出：隐藏！重要； }

【讨论】：