2013-03-12 5 views
0

jQuery UI 슬라이더 위젯에서 핸들을 좁히려 고합니다. 나는이 CSS를 만들었습니다 :기본 jquery CSS를 재정의 하시겠습니까?

DOM 검사관이 jQuery UI CSS를 위해 무시되고 있다고 말한 내용입니다.

어떻게하면 더 높은 우선 순위를 부여 할 수 있습니까? jQuery 함수 (.slider())에 의해 만들어지며 .html 파일에 실제로 있지 않으므로 슬라이더 핸들 ID를 지정하는 유일한 방법은이 jQuery를 사용하여 만든 코드 ID 을 할당하는 것입니다. , 그리고 나서 CSS가 적용되기를 바라고, 그렇지 않으면 수동으로 width 속성에 코드를 추가합니다. 이것들은 불합리한 것처럼 보인다.

가장 좋은 방법은 무엇입니까?

+3

자신보다 우선 적용되는 선택 도구는 무엇입니까? – Blender

+0

답변을 찾았습니다 -'! important' 태그를 사용하십시오. – Aerovistae

+2

@Aerovistae'! important'를 사용하지 마십시오. 먼저 유용 할 것 같지만 나중에 스타일 시트와 삶에 중독 된 것을 알게됩니다. – kapa

답변

3

specificity이 더 많아서 jQuery UI의 CSS에 의해 재정의되고 있습니다. 코드를 보면 더 많은 코드 만 있으면됩니다. 코드가 무시됩니다.

html body .ui-slider .ui-slider-handle {} 
/* the added points from html & body, will trump jQuery UI's rule */ 

이를 처리 할 !important를 사용하지만, 은 일반적으로주위에 얻을 수있는 방법이 진정이없는 경우를 제외하고,를 사용하지 않는 뭔가로했다. 예를 들어, 요소에 인라인 스타일이 있고 스타일 시트에서 인라인 스타일을 트럼프하고 싶을 수 있습니다. 인라인 스타일은 포인트가 주어지기 때문에 트럼프가 불가능합니다. 자세한 내용은 여기 당신이 충분히 열심히하려고하면 수동으로 자신의 CSS에서 JQuery와 또는 JQueryUI 기본 스타일 중 하나를 대체 할 수 있습니다 http://css-tricks.com/specifics-on-css-specificity/

+1

정확히 말하면'.ui-slider .ui-slider-handle'입니다. –

+0

아, 철저히 이해합니다. 고맙습니다 – Aerovistae

0

읽기. 이 문제의 몇하지만, 이렇게 함께있는 :

당신이 발견 한 것처럼
  • 는 캐스케이드 기본 CSS는 (아마도 놀라운) 방식으로 우선한다, 그래서 당신은 해킹을 사용해야합니다 - !important처럼, 또는 여분의 태그가 htmlbody과 같이 - 스타일이 JQuery를 "능가하는지"확인하십시오.
  • 더 많은 문제가있는 위젯 인 Menu는 초기화되었을 때 새로운 선택기를 동적으로 생성합니다. 스타일로 덮어 쓰려면 JS가 작성된 후에 Firebug 또는 유사한 도구를 사용하여 새로운 선택기 이름을 찾아서 스타일 시트에 추가해야합니다.

올바른 방법 ThemeRoller 도구를 사용하여 한 번에 모든 스타일을 변경하는 단일 사용자 지정 CSS "번들"을 만드는 것입니다. 보너스 : 맞춤 스타일이 동시에 모든 위젯에 미치는 영향을 볼 수 있으므로 페이지의 통일 된 모양을 만드는 것이 더 쉽습니다.

관련 문제