Jquery 모바일 CSS 클래스 연결

JQuery Mobile을 사용하여 모바일 웹 응용 프로그램을 만들고 있습니다. 이제 아래쪽에 어떤 종류의 탐색 메뉴가 있습니다. 여기에 HTML이 있습니다Jquery 모바일 CSS 클래스 연결

<ul data-role="listview"> 
    <li data-icon="arrow-u"><a href="#top" class="top" data-ajax="false">Top</a></li> 
    <li><a href="~PROBE(201)~" data-transition="slide">Menu</a></li> 
    <li><a href="~PROBE(208)~" data-transition="slide">Contacten</a></li> 
    <li><a href="~PROBE(206)~" data-transition="slide">Klanten</a></li> 
    <li><a href="~PROBE(207)~" data-transition="slide">Planning</a></li> 
</ul>

이제 첫 번째 listItem이 오른쪽에 필요합니다. 그래서 CSS 클래스 'top'을 만들었습니다.

.top{ 
    text-align:right; 
    padding-right:35px; 
}

하지만이 CSS 클래스를 사용하지는 않습니다. 아무도 도와 줄 수 있니?

출처

2012-04-16 Steaphann

목록을 오른쪽에서 시작 하시겠습니까? – Starx

는 시도 :

ul li a.top{ 
    text-align:right; 
    padding-right:35px; 
}

OR 등을 :

ul li:first-of-type a{ 
    text-align:right; 
    padding-right:35px; 
}

출처

2012-04-16 09:00:48

당신은 li의 a intead에 top 클래스를 적용하고 있습니다. 당신의 스타일 오버라이드 (override)됩니다으로

업데이트

, 당신은 그것을 무시 규칙의 특이성보다 높은까지 선택의 CSS-specificity을 증가해야합니다. DOM을 많이 알지 못해서 내가 줄 수있는 최선책은 다음과 같습니다.

ul li.top{ 
    text-align:right; 
    padding-right:35px; 
}

그러나 이것은 충분하지 않을 수 있습니다. CSS 특이성에 대한 기사를 살펴보면, 특이성을 계산하는 방법에 대한 부분이 있습니다.

출처

2012-04-16 07:38:53

클래스를 리에 넣을 때 작동하지 않습니다. – Steaphann

[피들] (http://jsfiddle.net/t9tRs/)에서 잘 작동하므로 계속 진행해야합니다. 좀 더 문제를 해결해야합니다. CSS가 적용되고 다시 적용되거나 전혀 적용되지 않습니까? 이를 확인하려면 브라우저의 devtools를 사용하십시오. –

예, 오버라이드됩니다. 하지만 어떻게 해결할 수 있을까요? – Steaphann

나는 어떤 경우에 오버라이드 (override) 조금 어려운 것을 발견했습니다. 이런 식으로해야 할 수도 있습니다. 일부 브라우저 모바일 & 웹은 내가 예상했듯이 오버라이드를 선택하지 않습니다. 최종 결과 내 스타일이 적용되는지 확인하기 위해 중요하게 사용해야합니다. 이 사용 방법과 사용 방법을 조심하십시오.

ul li.top{ 
    text-align:right !important; 
    padding-right:35px !important; 
}

출처

2012-04-16 13:30:22 imaginethepoet

Jquery 모바일 CSS 클래스 연결

답변

관련 문제