CSS3没有选择最后一个孩子
我有以下的CSS需要改变最后一个孩子没有类“myClass”,但我似乎无法让它的工作。CSS3没有选择最后一个孩子
任何想法我错了吗?根据要求
ul li:not(.myClass):last-child a {
font-style:italic;
}
HTML示例:
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li class="myClass"><a href="#">Extra</a></li>
</ul>
我想的CSS应用到李三...
这不能用CSS做只有当你能够使用jQuery你可能会发现这个解决方案有帮助。
$('ul li').not('.myClass').last().find('a').addClass('mystyle');
尽可能避免jquery,但我认为在这种情况下,这将是最好的方式。 – Tom
如果你想的CSS仅适用于李三,尝试:n-child(3)
ul li:nth-child(3) a {
border-right:0
}
此伪类根据子元素的父元素的子元素列表中的位置 匹配元素。 - http://reference.sitepoint.com/css/pseudoclass-nthchild
当然这会起作用,但麻烦在于每个页面上列表项目的数量不会相同,并且为每个页面编写新的CSS实际上不应该是必须的 - 再加上“.myClass”元素将不会出现在每一页上。 – Tom
如果你确定你要定位的元素是倒数第二个,你可以使用nth-last-child(2)
ul li:nth-last-child(2) a {
border-right:0px solid #000;
}
我不能总是确定它将是最后一个,但有时候“.myClass”不会存在......否则这将是完美的! – Tom
当前的CSS语法不能提供帮助n AND
运营商执行这种风格。你需要的是CSS LESS框架。
这将允许你这样做:
ul > li:not(.myClass) {
li:last-child {
//style here
}
}
也许放弃的HTML代码很短的例子来匹配和你想要的结果。 – Sirko
您是否尝试以其他方式添加伪类? 'ul li:last-child:not(.myClass)a'? – Mat
@Mat试过......仍然没有快乐 - 虽然似乎正在研究最后孩子而不是(.myClass)必须是真的理论 – Tom