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应用到李三...

来源

2012-09-19 Tom

也许放弃的HTML代码很短的例子来匹配和你想要的结果。 – Sirko

您是否尝试以其他方式添加伪类？ 'ul li：last-child：not（.myClass）a'？ – Mat

@Mat试过......仍然没有快乐 - 虽然似乎正在研究最后孩子而不是（.myClass）必须是真的理论 – Tom

这不能用CSS做只有当你能够使用jQuery你可能会发现这个解决方案有帮助。

http://jsfiddle.net/6ku3Y/

$('ul li').not('.myClass').last().find('a').addClass('mystyle');

来源

2012-09-19 09:39:22 Gustonez

尽可能避免jquery，但我认为在这种情况下，这将是最好的方式。 – Tom

如果你想的CSS仅适用于李三，尝试：n-child（3）

ul li:nth-child(3) a { 
    border-right:0 
}

http://jsfiddle.net/hhncn/

此伪类根据子元素的父元素的子元素列表中的位置匹配元素。 - http://reference.sitepoint.com/css/pseudoclass-nthchild

来源

2012-09-19 09:16:07 gearsdigital

当然这会起作用，但麻烦在于每个页面上列表项目的数量不会相同，并且为每个页面编写新的CSS实际上不应该是必须的 - 再加上“.myClass”元素将不会出现在每一页上。 – Tom

如果你确定你要定位的元素是倒数第二个，你可以使用nth-last-child(2)

ul li:nth-last-child(2) a { 
    border-right:0px solid #000; 
}

来源

2012-09-19 09:20:34 Giona

我不能总是确定它将是最后一个，但有时候“.myClass”不会存在......否则这将是完美的！ – Tom

尝试是这样的：

ul li:not(.myClass):nth-last-of-type(2) a { 
    border-right:0px solid #000; 
}

SEE DEMO

来源

2012-09-19 09:23:20

当前的CSS语法不能提供帮助n AND运营商执行这种风格。你需要的是CSS LESS框架。

这将允许你这样做：

ul > li:not(.myClass) { 
    li:last-child { 
    //style here 
    } 
}

来源

2012-09-19 09:33:57

CSS3没有选择最后一个孩子

回答

相关问题