Css jQuery Mobile有选择地覆盖按钮上的ui btn内部类？

因此，这里详细介绍了如何通过重写页面上的类来删除按钮上的填充：

但我如何看待这一点：

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

按钮名称

想法？创造性的解决方案

---

谢谢

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

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

HTML:

CSS:

.ui-btn-up-a.ui-btn-inner，

.ui-btn-hover-a.ui-btn-internal，

.ui-btn-down-a.ui-btn内部

{
填充：0px；
}

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

只需将不同的主题（如“b”）应用于应保持填充的按钮。使用这种类型的CSS继承，您可以完全疯狂地使用按钮

你可以有无限数量的主题。我转到主题滚轮，为字母表中的每个字母创建一个默认主题。然后，用CSS将它们覆盖到我的心上

---

当我尝试使用jQuery Mobile进行工作项目时，这是一个很大的症结所在。他们已经有了一个UI设计，我的任务是让jQuery Mobile完全匹配它。

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

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

HTML:

CSS:

.ui-btn-up-a.ui-btn-inner，

.ui-btn-hover-a.ui-btn-internal，

.ui-btn-down-a.ui-btn内部

{
填充：0px；
}

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

只需将不同的主题（如“b”）应用于应保持填充的按钮。使用这种类型的CSS继承，您可以完全疯狂地使用按钮

你可以有无限数量的主题。我转到主题滚轮，为字母表中的每个字母创建一个默认主题。然后，用CSS将它们覆盖到我的心上

---

当我尝试使用jQuery Mobile进行工作项目时，这是一个很大的症结所在。他们已经有了一个UI设计，我的任务是让jQuery Mobile完全匹配它。

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

HTML:

---

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

HTML:

---

我只是想让图标显示时没有边框或背景，所以我使用了您的示例，但图标向上移动了，所以我用这个来重新定位它：

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

---

我只是希望图标显示时没有边框或背景，因此我使用了您的示例，但图标向上移动，因此我使用此选项重新定位它：

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

关于如何有选择地应用css类重写，我还没有答案，但我有一个解决方案，可以从我正在使用的ui网格中的特定按钮中删除该类：

$（'.ui-grid-b'）.each（function（）{$（this.find（'span'）.each（function（）{$（this.removeClass（'ui-btn-inner'）；}））;在测试中——看起来，即使绑定到pageLoad事件，上述注释技巧也无法100%工作。仍然在寻找一个真正的解决方案。关于如何有选择地应用css类重写，我还没有答案，但我有一个解决方法，可以从我正在使用的ui网格中的特定按钮中删除该类：
$（'.ui-grid-b'）。each（function（）{$（this）。find（'span'）。each（function（）{$（this）。removeClass（'ui-btn-internal'）；}）}；
在测试中——似乎上面的注释技巧即使绑定到pageLoad事件也不能100%工作。仍在寻找真正的解决方案。