在jquery mobile中更改特定图标的颜色

时间:2014-04-11 09:17:55

标签: jquery css jquery-mobile icons jquery-mobile-listview

我编写了以下代码,但我希望我的主页图标为蓝色。如何更改背景颜色?

  <ul data-role="listview" data-inset="true" class="ui-nodisc-icon ui-alt-icon">
        <li><a href="#page_1" class="ui-btn ui-icon-home ui-btn-icon-right" data-role="link" style="text-align: center; font: bold arial 95px;">Home</a></li>
        <li><a href="#" class="ui-btn ui-icon-shop ui-btn-icon-right" data-role="link" style="text-align: center;">Products</a></li>
    </ul>

1 个答案:

答案 0 :(得分:8)

使用:after CSS选择器覆盖按钮的图标。在覆盖全局类时,您还必须具体,以便不对所有按钮应用更改。

ul.ui-nodisc-icon li:first-child .ui-btn:after {
  background-color: #4da6ff;
}

以上内容仅适用于列表视图的first-child。您可以替换li:first-child&amp;将.ui-btnid添加到锚点class,例如:

<ul data-role="listview">
  <li>
    <a href="#" id="home">Home</a>
  </li>
</ul>

ul.ui-nodisc-icon #home:after {
  background-color: #4da6ff;
}
  

<强> Demo