jQuery Mobile有选择地覆盖按钮上的ui-btn-inner类？

Question

所以这里详细介绍了如何通过覆盖页面上的类来删除按钮上的填充：Can the button padding be adjusted in Jquery Mobile?

但我该怎么做呢：

.ui-btn-inner {
padding: 0;}

并选择性地将其应用于一个按钮，即：

<button data-icon="false" onclick="alert('clicked me')">Button Name</button>

做这样的事情不起作用：

<button style="padding:0" data-icon="false" onclick="alert('clicked me')">Button Name</button>

思考？创意解决方案？

由于

Answer 1

只需为该按钮设置一个新类，然后按如下所示更改子类。

HTML：

<a href"#" data-role="button" class="myClass">Text</a>

CSS：

.myClass .ui-btn-inner{
    padding: 0px;
}

Answer 2

我想我终于找到了一个解决方案（现在已经尝试解决了一段时间）！

使用CSS的“级联”部分来帮助您。例如，如果您的按钮使用主题'a'，则可以将.ui-btn-inner的填充规则仅应用于主题为'a'的按钮。只需使用主题属性为您尝试更改的类添加前缀。

HTML：
        <a href"#/mypath" data-role="button" data-theme="a">Touch Me</a>

CSS：
        .ui-btn-up-a .ui-btn-inner,
.ui-btn-hover-a .ui-btn-inner,
.ui-btn-down-a .ui-btn-inner
{ padding: 0px; }

正如您所看到的，这意味着您必须为按钮的每个状态创建规则，否则当您触摸按钮时，填充将在瞬间返回。

只需将不同的主题（例如“b”）应用于应保留其填充的按钮。你可以使用这种类型的CSS继承完全坚持按钮。

您可以拥有无​​限数量的主题。我去主题滚轮并为字母表的每个字母创建默认主题。然后，只需用CSS覆盖它们就可以了解我的内容。

当我尝试将jQuery Mobile用于工作项目时，这是一个很大的问题。他们已经有了UI设计，我的任务是让jQuery Mobile完全匹配它。

Answer 3

我只是希望图标显示没有边框或背景所以我使用了你的例子，但是图标向上移动了所以我用它来重新定位它：

.ui-btn-up-mytheme .ui-btn-inner, 
.ui-btn-hover-mytheme .ui-btn-inner, 
.ui-btn-down-mytheme .ui-btn-inner {
margin-top: 2px;
border: none;
} 

html标记：

<a href="schedules" data-rel="back" data-icon="arrow-l" data-iconpos="notext"
 data-theme="mytheme" data-shadow="false"  ></a>