0

我正在使用 JQuery Mobile 制作移动 webapp。现在在底部我有某种导航菜单。这是HTML

<ul data-role="listview">
    <li data-icon="arrow-u"><a href="#top" class="top" data-ajax="false">Top</a></li>
    <li><a href="~PROBE(201)~" data-transition="slide">Menu</a></li>
    <li><a href="~PROBE(208)~" data-transition="slide">Contacten</a></li>
    <li><a href="~PROBE(206)~" data-transition="slide">Klanten</a></li>
    <li><a href="~PROBE(207)~" data-transition="slide">Planning</a></li>
</ul>

现在我想要右侧的第一个 listItem。所以我做了一个CSS类'top'

.top{
    text-align:right; 
    padding-right:35px;
}

但由于某种原因，它不采用这个 CSS 类。有人可以帮忙吗？

4

3 回答 3

1

您正在将该top类a应用于li.

更新

随着您的样式被覆盖，您需要增加选择器的CSS 特定性，直到它高于覆盖它的规则的特定性。由于我对您的 DOM 了解不多，所以我能给您的最好的是：

ul li.top{
    text-align:right; 
    padding-right:35px;
}

但这可能还不够。浏览关于 CSS-specificity 的文章，有一部分是关于如何计算特异性的。

于 2012-04-16T07:38:53.623 回答
1

试试这样：

ul li a.top{
    text-align:right; 
    padding-right:35px;
}

或这样的：

ul li:first-of-type a{
    text-align:right; 
    padding-right:35px;
}
于 2012-04-16T09:00:48.953 回答
0

我发现在某些情况下，覆盖有点棘手。你可能不得不做这样的事情。一些浏览器移动和网络没有像我预期的那样选择覆盖。最终结果我必须使用重要来确保我的风格得到应用。请注意如何使用它以及在哪里使用它。

ul li.top{
    text-align:right !important; 
    padding-right:35px !important;
}
于 2012-04-16T13:30:22.980 回答