Как я могу перезаписать родительский стиль для элемента

Question

<div class="jqueryslidemenu">
<ul>
<li  class="menuitem">TEST1</li>
<li  class="navOFFTDDisabled" id="TEST2">TEST2</li>
<li  class="navOFFTDDisabled" id="TEST3">TEST3</li>
<li  class="navOFFTDDisabled" id="TEST4">TEST4</li>
</ul>
</div>


CSS FILE 
.jqueryslidemenu ul li {
display: block;
background: #FFCC00; 
color: white;
padding: 4px 12px 6px 5px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
font-weight: bold;
cursor: hand;
}

.navOFFTDDisabled{
//Aplly Style 
}

Я не могу применить class = "navOFFTDDisabled" к каждому (li) элементам, потому что "jqueryslidemenu" перезаписывает стиль navOFFTDDisabled. Как я могу применить оба стиля

Answer 1

Сделайте его лучше,

.jqueryslidemenu ul li.navOFFTDDisabled{
//I'm more important neener neener.
}

Просто чтобы быть более полезным, вы можете вычислить, какой селектор имеет приоритет, как описано в спецификации

Answer 2

У вас есть три возможности переопределить селектор:

1. порядок селектора: селектор, расположенный ниже в вашей таблице стилей, переопределяет селектор, который находится дальше к вершине

2. специфичность селектора: http://www.w3.org/TR/CSS2/cascade.html и http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/

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

3. последнее, что вы можете сделать, это добавить !important к правилу стиля, которое переопределяет любой другой селектор.Чтобы быть правильным, вы все равно можете иметь больше !important правил, чем правило специфичности селектора.Например .klass{color:red !important}