Question

我正在使用JQuery Mobile制作移动网络应用程序。现在在底部我有一些导航菜单。这是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类。有人可以帮忙吗？

Answer 1

您正在将top课程应用于a的{{1}}内容。

<强>更新

当您的样式被覆盖时，您需要增加选择器的CSS-specificity，直到它高于覆盖它的规则的特异性。由于我不太了解你的DOM，我能给你的最好的是：

li

但这可能不会实现。通过关于CSS特异性的文章，有一部分关于如何计算特异性。

Answer 2

试试这样：

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

或者这样：

ul li:first-of-type a{
    text-align:right; 
    padding-right:35px;
}

Answer 3

我发现在某些情况下，覆盖有点棘手。你可能需要这样做。一些浏览器移动＆amp;网络没有像我预期的那样接受覆盖。最终结果我必须使用重要的，以确保我的风格得到应用。小心如何使用这个和在哪里。

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

Jquery移动CSS类链接

3 个答案: