Стиль класс только внутри стола

Question

Я использую CMS с предопределенными классами (cbFormFieldCell).Поэтому я не могу изменить некоторые элементы класса, потому что они используются в некоторых других частях сайта.Если я изменю формат для каждого элемента этого класса, веб-сайт будет поврежден.

Я хочу изменить стиль класса "cbFormFieldCell" только внутри <table class="tabelle">.За пределами таблицы другие элементы не могут быть изменены.

.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

Спасибо всем!

Мне фактически пришлось удалить пробел, использовать важные и дополнительно использовать другой класс по умолчанию.

.cbFormTableEvenRow .cbFormFieldCell {минимальная ширина: 100 пикселей! важно; максимальная ширина: 100 пикселей! важно; ширина: 100px! важно; переполнение: скрыто! важно; }

Answer 2

Вы объединяете классы, записывая их без пробелов, что в основном означает, что .tabelle.cbFormFieldCell будет применяться к элементу, имеющему ОБА этих классов.

Для нацеливания .cbFormFieldCell внутри .tabelle добавьте пробел между ними, как это .tabelle .cbFormFieldCell.

Или, если это прямой дочерний элемент .tabelle, вы можете использовать селектор-потомок, как этот .tabelle > .cbFormFieldCell

Answer 3

«Пробел» между вашими 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 4

Вы можете использовать css! Важный, как этот

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

"! Важный" делает атрибут css первым уровнем