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

Question

我试着设计我的折叠式。我希望在以下列表中的第一个元素的标题上投射一个阴影。但是我找不到合适的选择器来使其成为单个阴影，而是阴影出现在每个 li 元素上。你能帮我吗？

我为这个例子做了一个 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

演示

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