Html CSS3伪类不是第一个和最后一个子类
我有以下一些HTML代码:Html CSS3伪类不是第一个和最后一个子类,html,css,css-selectors,pseudo-class,Html,Css,Css Selectors,Pseudo Class,我有以下一些HTML代码: <ul> <li>number 1</li> <li>number 2</li> <li>number 3</li> <li>number 4</li> <li>number 5</li> <li>number 6</li> <li>number
<ul>
<li>number 1</li>
<li>number 2</li>
<li>number 3</li>
<li>number 4</li>
<li>number 5</li>
<li>number 6</li>
<li>number 7</li>
<li>number 8</li>
<li>number 9</li>
<li>number 10</li>
</ul>
- 第一
- 二号
- 三号
- 4号
- 五号
- 6号
- 七号
- 8号
- 9号
- 十号
例如,如何使用CSS3伪类使任何不是第一个或最后一个元素的li
元素具有番茄的背景色?看来我可以用:而不是选择器。这是一支钢笔
您必须组合两个:not()
伪类:
li:not(:first-child):not(:last-child) {
background: red;
}
这里有一个问题:如上所述,IE<9不支持它,而其他浏览器也支持它
如果您需要IE8支持,您必须依赖Javascript或使用另一个类来指示哪个元素是最后一个子元素。事实上,IE 8(及更低版本)不支持:last child
伪类。两种方式:
您可以设置常规规则,然后为:第一个子项
和:最后一个子项
项重写它。这发挥了CSS的优势:
li { background: red; }
li:first-child, li:last-child { background: white; }
或者,您可以将:not
关键字与以下两个关键字组合使用:
li { background: white; }
li:not(:first-child):not(:last-child) { background: red; }
在这两种方法中,我个人更喜欢第一种——它更容易理解和维护(在我看来)。这一种适合我
.candidate_verified_items ul li:not(:last-child),
.candidate_verified_items ul li:first-child:not(:last-child) {
border-right: 1px dashed #7b8db9;
}
是的。当IE<9不支持时,它非常有用。谢谢!请注意,这在IE8上不起作用,因为它不受支持。