css - 如何在 Jquery Mobile 中使用单个 css 投影制作可折叠的？

Question

我试着设计我的可折叠元素。我想在下面列表中的第一个元素上从标题转换一个投影。但是我找不到合适的选择器来使它成为单个阴影，而是阴影出现在每个 li 元素上。你能帮帮我吗？

我为此 Example 制作了一个 jsfiddle

HTML 代码:

<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;
}