javascript - 通过 CSS 更改 JQuery Mobile 的字体和颜色

Question

在这个问题中，我不会让用户对我的 JQuery 列表中的颜色或字体类型进行任何控制。

我想知道是否有一种方法(无需应用全新的主题)来更改 JQuery 列表的字体颜色。这是当前使用的默认主题。

类名为:ui-content

我已尝试将此 CSS 应用于页面，但页面看起来仍然像默认的 JQuery 主题:

  .ui-content{
      font: "Helvetica Neue-Light", Helvetica, Arial, sans-serif;
      color:#A25254;
  }

这是 ListView 的行之一未更改字体或颜色的示例:

我希望字体是浅色，而不是粗体。我还希望能够更改表格左侧的图标。

下面是如何构建表的示例代码:

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div role="main" class="ui-content" data-filter="true">
  <!--Begining of Table View-->
    <div data-role="collapsible" data-inset="false">
      <h3>Title</h3>
      <p>Description</p>
    </div>
  </div>
</div>

这是我正在尝试做的 JSFiddle:http://jsfiddle.net/jakechasan/M7LLU/

Answer 1

对此几乎没有选择。首先你应该使用 id 。 <div role="main" class="ui-content" data-filter="true" id="Something">

所以 Css 会是这样的:

#Something{
    font: "Helvetica Neue-Light", Helvetica, Arial, sans-serif;
    color:#A25254;
}

另一种选择是“检查”您的 div 并找出您的 div 的类别。

你会发现这样的东西.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper 粗体字是(我在 google chrome 上查过。如果它是粗体字，那是你应该写的) 如果粗体是:.ui-panel-wrapper
示例:

.ui-panel-wrapper .ui-content{
    yourCss:ishere;
}