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"添加到 anchor 标记以将其转换为按钮。然后应用您自己的样式。

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

jQuery Mobile 1.4 (Beta)

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

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