2012-01-23 2 views
0

사용자 정의 클래스의 하위 클래스에만 스타일을 적용 할 수 있습니까? 내 DOM 요소의 하위 항목에 대해서만 jQuery UI 스타일을 재정의하고 싶습니다. 나는 아이 선택기를 시도했습니다CSS 클래스 선택자의 자식

뭔가

.myStuff .ui-button {font-size: 0.7em !important;} 

<div class="myStuff"> 
    <input type="button"></input> !-- jQuery UI class .ui-button 
</div> 

<input type="button"></input> !-- .ui-button not effected by my .ui-button style 

같은 (>)하지만 첫 번째 수준에서 정지 :(. 나는 실제로 공간이 두 배 수준의 구문은 올바른 일이라고 생각 ... .하지만이 중 하나가 작동하지 않습니다

를이 내가 jQuery를 UI에서 오버라이드 (override)하기 위해 노력하고있어 정확한 선택기는 다음과 같습니다

.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; } 
.ui-widget .ui-widget { font-size: 1em; } 
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; } 
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; } 
.ui-widget-content a { color: #222222/*{fcContent}*/; } 
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; } 
.ui-widget-header a { color: #222222/*{fcHeader}*/; } 
내가 정말 그냥 글꼴 크기를 변경하려면

... 내가 노력 할게요 ca까지 당신의 예에 따라 그것을 계산해라. 그러나 나는 어떤 운도 어제 가지지 않고 있었다 :(.

+0

"공백이있는 이중 클래스 구문"은 무엇입니까? – BoltClock

+0

나는 .myStuff .ui 버튼에 대해 이야기하고 있습니다. 두 CSS 클래스 사이에 공백이 있습니다. 나는 그것이 일급의 후손을 암시한다고 생각했다. – farina

답변

3

당신은 CSS가 괜찮아 보이는 것 같습니다. 그러나 나는 당신이 CSS specificity의 희생자라고 생각합니다. jQuery UI 스타일 시트 파일을 열면 덮어 쓰려는 CSS 규칙의 선택자가 CSS 규칙보다 구체적이라는 것을 알 수 있습니다. 따라서 우위를 가지며 규칙에 우선적으로 사용됩니다.

이것을 무시하려면 jQuery UI에서 제공하는 규칙보다 더 큰 특이성을 가진 CSS 규칙을 추가해야합니다.

업데이트

그것은 우리가 선택 우리가 오버라이드 (override) 할 규칙을 찾습니다 방법을 알고하지 않기 때문에,이 경우 규칙을 무시하는 방법의 정확한 예제를 제공하기 어렵다. 그러나 일반적인 아이디어는 재정의하려는 규칙의 구체성을 계산해야한다는 것입니다 (위에서 링크 된 Smashing Mag 기사를 참조하십시오). 그런 다음 규칙 구체성이 재정의하려는 규칙의 특수성. 이를 수행하는 방법에는 여러 가지가 있습니다. 예를 들어 선택기에 클래스 나 ID를 추가하십시오.

jQuery UI 스타일 시트를 열고, 사용하려는 정확한 선택기를 복사하고, 해당 선택기를 사용하고 사용자의 .myStuff 클래스 앞에 추가하는 규칙을 찾아내는 것이 가장 쉬운 방법이라고 생각합니다. jQuery UI에서 제공하는 것보다 더 구체적 인 규칙을 가져야한다.

또한이 문제를 해결하기 위해 !important을 사용하지 않는 것이 좋습니다. 이것은 제 개인적인 견해입니다 만,! important를 사용하기 시작하면 나중에 CSS를 수정하려고 할 때 고통의 세계에 빠지게 될 것입니다. CSS의 정상적인 흐름을 깨뜨리는! important로 지정된 규칙을 사용하면 결함이있는 레이아웃을 문제없이 해결할 수 있습니다.

+0

+1 좋은 답변 ... 더 구체적인 규칙을 작성하는 예를 보여주세요 ... –

+0

예, 이것이 답이라고 생각하지만 계층화 된 CSS를 모두 알아 내야 만 재정의 할 수 있습니다. 나는 약 15 개의 클래스를 시도했다 ...그들 중 누구도 일하지 않습니다. 내 CSS 파일에서 .ui-widget {font-size : 0.7em! important;}을 사용하면 .myStuff .ui-widget {font-size : 0.7em! important;}을 사용하면 효과가 없습니다. . – farina

+0

@ j-man86 무시할 규칙의 선택자가 어떻게 생겼는지 모를 때 예제를 제공하기는 어렵지만 최소한 추가 정보로 내 대답을 업데이트해야합니다. –

1

예, 예를 사용할 수 있습니다.

.myStuff .ui-button {some custom style} 

그러나 Chrome의 개발자 도구 (또는 FF 또는 IE)로 dom을 확인하여 올바른 선택기를 사용하고 있는지 확인하십시오. jQuery UI는 다양한 위젯에 대해 많은 dom 요소를 추가 할 수 있습니다.