jquery에 CSS 클래스를 선택하는 방법

Question

프로젝트에서 선택 가능한 jquery 사용. 난 할 노력하고있어하는 몇 가지 조건이 작동하지 동적으로

<li class="ui-widget-content groups"> 



.groups { 
     padding-right: 10px; 
    } 

이에 리튬에 여백 오른쪽을 추가 할 것입니다

<li class="ui-widget-content"> 

.selectable li { 
      margin: 1px; 
      padding: 0.4em; 
      height: 0.52em; 
      line-height: 0.54em; 
      position: relative; 
      cursor: default;        
     } 

: 같은이 코드는 보인다. 패딩 오른쪽 추가 : 10px; .selectable li에 패딩이 추가됩니다. 하지만 나는 패딩을 추가 클래스로 추가 할 때 작동하지 않는다고 말했고 때로는 패딩이 있고 때로는 어떤 조건에 의존하지 않기 위해해야 ​​할 일입니다.

내가 그 JQuery와는 별도의 클래스 'UI-selectee "를 추가했습니다 자체 수있는 브라우저 관리자에서 찾고 :

<li class="groups ui-widget-content"> 

:

<li class="ui-widget-content groups ui-selectee" > 

이 같이 먼저 추가 클래스를 추가하는 시도 해 봤나

마녀는 또한 작동하지

<li class="groups ui-widget-content ui-selectee" > 

렌더링합니다.

인스펙터에서 .groups 클래스는 교차하지 않습니다.

누가 클래스를 추가하는 것이 패딩을 추가하지 않는지 아는 사람이 있습니까?

Answer 1

. 선택 가능한 li에 이미 0.4em의 패딩이 포함되어 있으므로 jquery selectable이 스타일을 무시하고 있습니다. 그래서이 코드를 사용해보십시오 :

.groups { 
     padding-right: 10px !important; 
    } 

Answer 2

은 당신의 CSS 규칙에 추가 클래스를 추가 할 클래스의 "값"을 향상시킬 수 있습니다.

.ui-widget-content.groups{ 
    padding-right: 10px; 
} 

또는

.ui-widget-content.ui-selectee.groups{ 
    padding-right: 10px; 
} 

피가 미래에 많은 문제를 일으킬 수 있기 때문에, 당신의 CSS에서 !important를 사용하는 예를 들면 다음과 같습니다. CSS 특이성이 계산되는 방법을 규칙 here을 통해 배울 수 있습니다.