jquery mobile 更改特定元素

Question

所以我设置了两个 ListView ，我想区分两者，但我不知道如何区分。我尝试在 Firebug 中进行调试，但我只能更改该类所有元素的代码。示例:

列表#1

<ul data-role="listview" data-filter-theme='b' id='userList'>
    <li><img src='img1.jpg'/><h3>Item 1</h3><p>Details 1</p></li>
    <li><img src='img2.jpg'/><h3>Item 2</h3><p>Details 2</p></li>
    <li><img src='img3.jpg'/><h3>Item 3</h3><p>Details 3</p></li>
</ul>

列表 #2

<ul data-role="listview" data-filter-theme='b' id='mainList'>
    <li><img src='img1x.jpg'/><h3>Thing 1</h3><p>Details 1</p></li>
    <li><img src='img2x.jpg'/><h3>Thing 2</h3><p>Details 2</p></li>
    <li><img src='img3x.jpg'/><h3>Thing 3</h3><p>Details 3</p></li>
</ul>

在 LIST #1 中，我需要说 li 元素是:

.ui-li-static .ui-li{padding:0.1em 0px;}

. . . 在 LIST #2 中，我需要 li 元素:

.ui-li-static .ui-li{padding:0.7em 15px;}

. . 我尝试在前面添加元素ID:

#userList .ui-li-static .ui-li {padding:0.1em 0px;}

. . 但这没有用。

Answer 1

工作示例:http://jsfiddle.net/Gajotres/dgt8U/

这个结构.ui-li-static .ui-li 不存在，它是ether #userList .ui-li-static 或 #userList .ui-li

#userList .ui-li  {
    padding:2.1em 0px !important;
}



#mainList .ui-li  {
    padding:0.7em 15px !important;
}