Jquery 모바일에서 단일 CSS 드롭 섀도우로 접을 수있는 방법은 무엇입니까?

Question

나는 접을 수있는 스타일을 시도합니다. 다음 목록의 첫 번째 요소 머리글에서 캐스팅 된 단일 그림자가 있어야합니다. 그러나 그림자를 모든 li 요소에 표시하는 대신 오른쪽 선택기를 단일 그림자로 만들 수는 없습니다. 도와 줄수있으세요?

나는이 Example

HTML 코드에 대한 jsfiddle을했습니다 :

<div data-role="collapsible-set" data-content-theme="d" data-inset="true" > 
    <div data-role="collapsible" data-inset="false" data-collapsed="false"> 
     <h3>Section 1</h3> 
     <div data-role="collapsible" class="submenue no_corners" 
       data-inset="true" data-theme="c" data-theme-content="d" 
       data-corners="false" data-collapsed="false"> 
      <h3> Submenue </h3> 
      <ul data-role="listview" data-icon="plus"> 
       <li>Subitem </li> 
       <li>Subitem </li> 
       <li>Subitem </li> 
      </ul> 
     </div> 
    </div> 
</div> 

CSS 스타일 :

.ui-collapsible-content li { 
    -webkit-box-shadow: inset 0px 8px 8px -2px #AAAAAA; 
    -moz-box-shadow: inset 0px 8px 8px -2px #AAAAAA; 
    box-shadow:   inset 0px 8px 8px -2px #AAAAAA; 
} 

Answer 1

사용 사이비 CSS의 선택 :first-child

Demo

.ui-collapsible-content li:first-child { 
-webkit-box-shadow: inset 0px 8px 8px -2px #AAAAAA; 
-moz-box-shadow: inset 0px 8px 8px -2px #AAAAAA; 
box-shadow: inset 0px 8px 8px -2px #AAAAAA; 
} 

Answer 2

는 명백한 오이

http://jsfiddle.net/BRy5G/

.no_corners, .no_corners h3 a { 
    -moz-border-radius: 0 !important; 
    -webkit-border-radius: 0 !important; 
    -moz-border-radius: 0 !important; 
    border-radius:0px; 
} 
.ui-collapsible-content li { 
    -webkit-box-shadow: inset 0px 8px 8px -2px #AAAAAA; 
    -moz-box-shadow: inset 0px 8px 8px -2px #AAAAAA; 
    box-shadow:   inset 0px 8px 8px -2px #AAAAAA; 
}