CSS возвращается к определенному стилю

Question

В моем приложении часто используемый HTML компонент является стилями как:

.box { 
    min-width: 100px; 
    padding: 20px 10px; 
} 

есть много из них (100+) и их граница стилизована без дна и отличаются по цвету:

.box:nth-child(1) { 
    border: 2px solid red; 
    border-bottom: none; 
} 
.box:nth-child(2) { 
    border: 2px solid green; 
    border-bottom: none; 
} 
.box:nth-child(3) { 
    border: 2px solid blue; 
    border-bottom: none; 
} 
.box:nth-child(4) { 
    border: 2px solid yellow; 
    border-bottom: none; 
} 

...

Там есть страница в приложении, где нужно будет отображаться с полной границей (в том числе нижней границы) все эти коробки - то, что нужно, чтобы удалить «Боудера-дно: нет 'definiti дополнения. Поэтому на этой конкретной странице я попытался переопределить определение .box:

.box { 
    border-bottom: initial; /* tried unset as well...*/ 
} 

Но это все еще результат без границы. Есть ли способ указать стиль, чтобы все .box принимали полную границу - или мне нужно переопределить все нижние границы?

Дан

Answer 1

border-bottom: initial; не даст вам границу.

Установите второе определение для border-bottom: 1px solid #efefef;

Answer 2

Почему бы не определить другой класс для этого компонента и определить границы дна для этого класса и поместить его в качестве !important

.another_class{ 
border-bottom: 1px solid #efefef !important; 
}