Jquery移动CSS类链接

我正在用JQuery Mobile制作一个移动Web应用程序。现在在最下面我有一些导航菜单。这里是HTMLJquery移动CSS类链接

<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{ 
    text-align:right; 
    padding-right:35px; 
}

但由于某种原因，它不需要这个CSS类。任何人都可以帮忙吗？

来源

2012-04-16 Steaphann

您想从右侧开始列表吗？ – Starx 2012-04-16 08:10:20

试试这样：

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

或者这样：

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

来源

2012-04-16 09:00:48

您正在将top类应用于li的a intead。

更新

当你的造型被覆盖，你需要增加你的选择的CSS-specificity，直到它比覆盖它的规则的特异性较高。由于我对DOM的了解不多，我可以给你的最好的是：

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

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

来源

2012-04-16 07:38:53

当我把课程放到li上时，它也不起作用。 – Steaphann 2012-04-16 07:41:28

它在[Fiddle]（http://jsfiddle.net/t9tRs/）中工作得很好，所以一定还有其他的事情发生。你将不得不排除更多的故障。 CSS是否被应用，然后被覆盖，还是根本没有应用？使用浏览器的devtools来验证这一点。 – 2012-04-16 07:46:35

是的，它被覆盖。但我该如何解决这个问题？ – Steaphann 2012-04-16 08:03:33

我发现，在某些情况下，覆盖是有点棘手。你可能需要做这样的事情。一些浏览器的移动&网站没有按照我的预期来选择重写。最终结果我必须使用重要的来确保我的风格得到应用。只要小心如何使用这个和在哪里。

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

来源

2012-04-16 13:30:22 imaginethepoet

Jquery移动CSS类链接

回答

相关问题