css - jQueryMobile - 仅更改几个按钮的大小

Question

我在 jQueryMobile 的多个“页面”中有几个按钮。我可以在我的 css 中使用以下内容更改所有按钮的大小。

.ui-btn { 
    height: 150px; 
}

但是，我只希望我的第一页（id='menu'）上的按钮这么大（150px），其他页面应该有默认的高度值。我尝试#menu .ui-btn {...}添加一个类 bigButton 并做.bigButton .ui-btn {...}，但这也不起作用。

<div data-role="page" id="menu">
    <div data-role="content">
        <button id="snapPic" class="bigButton" onclick="capturePhoto();">Snap picture</button> 
        <br/>
        <button id="makeClouds" class="bigButton" onclick="location.href='makeClouds.html'">Make clouds</button>
    </div>
</div>

Answer 1

jQuery Mobile 1.3.2 及以下

将data-role="button" 添加到锚标记以将其转换为按钮。然后应用您自己的样式。

<a href="#" data-role="button" class="bigButton">Big Button</a>

jQuery Mobile 1.4（测试版）

出于性能目的，data-role="button"现在已删除并替换为 class .ui-btn。

<a href="#" class="ui-btn bigButton">Big Button</a>