苦苦于让这个CSS类选择器工作

时间:2014-07-18 15:23:45

标签: css css-selectors

我有一个CSS规则:

.ajaxwebfont a {text-transform:lowercase;}

我希望它能匹配的HTML是:

<a class="fa fa-check-square-o ss-prime ss-cmd ajaxwebfont" href="..">Click me</a>

正如您所看到的,目标元素中还有其他类用于定义webfont。但是我曾希望我只需要匹配“ajaxwebfont”。

赞赏的想法。

2 个答案:

答案 0 :(得分:6)

选择器应该是a.ajaxwebfont,因为它是具有该类的锚(a)元素。

.ajaxwebfont a会引用父元素中的任何a标记,其中类为ajaxwebfont

当你在两个值之间添加一个空格时,意味着第二个是第一个的孩子,如

.demo #sample /* refers an element with id=sample under a parent with class=demo */
a .demo /* refers an element with class=demo under a parent anchor tag */

没有空间意味着两者都是相同的元素。

a.ajaxwebfont /* refers an element with class=ajaxwebfont which is also an anchor tag */
.demo.ajaxwebfont /* refers an element with class=ajaxwebfont which also has clss=demo */
#demo.ajaxwebfont /* refers an element with class=ajaxwebfont which also has id=demo */

答案 1 :(得分:1)

这取决于其他类正在影响它。如果没有其他类正在应用文本转换,您可以使用.ajaxwebfont。如果有什么东西压倒一切,那么你必须比那些覆盖它的东西更具体。

如上所述

和ofc,该类位于元素选择器之后,但是附加了。 a.class