当前位置: 首页 > 面试题库 >

CSS:not(:last-child):选择器之后

颛孙建业
2023-03-14
问题内容

我有一个元素列表,其样式如下:

ul {

    list-style-type: none;

    text-align: center;

}



li {

    display: inline;

}



li:not(:last-child):after {

    content:' |';

}


<ul>

    <li>One</li>

    <li>Two</li>

    <li>Three</li>

    <li>Four</li>

    <li>Five</li>

</ul>

输出One | Two | Three | Four | Five |代替One | Two | Three | Four | Five

有谁知道如何使用CSS选择除最后一个元素以外的所有元素?

您可以在此处查看:not()选择器的定义


问题答案:

如果不是选择器有问题,则可以设置所有选择器并覆盖最后一个选择器

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

或者如果您可以使用之前,则不需要最后一个孩子

li+li:before
{
  content: '| ';
}


 类似资料:
  • 问题内容: 是否可以选择最后一个没有课程属性的孩子?像这样: 在这种情况下,我想选择第三行。 我尝试了以下操作,但无效: 提前致谢。 问题答案: 不单单是CSS选择器,也不是,就像专门针对 最后一个child一样 ,并且没有类似的伪类。请参阅我对这个相关问题的回答。 截至2015年底,对于选择器4的扩展,实现已开始慢慢进行,并允许您将任意选择器作为参数传递(有关更多信息,请参见链接答案的更新)。然

  • 问题内容: 根据介绍,我们可以在jQuery中使用大量CSS选择器,但此处未提及。但是,当我测试以下内容(使用Google的jQuery1.7.1)时,它实际上可以在Firefox,Chrome和IE 9上运行,但不能在IE 8仿真模式下的IE 9上运行: 那是怎么回事?好像jQuery生成了CSS代码一样,并且以某种方式注入了它,然后在支持所用选择器的浏览器上可以正常工作。但这很奇怪。 最重要的

  • 问题内容: 有谁知道哪些浏览器/版本支持它们? 使用它们是否安全?还是应该诉诸PHP / javascript来生成头等舱或后等舱? 问题答案: 以及免费的兼容性图表。 正确支持IE9,以及IE7和IE8之类的(参见图表)。 仅IE9 +支持。 好的浏览器都很好地支持了它们。

  • 问题内容: 除非不应该这样,但我似乎无法承认类选择器。 我在另一个div内说了4个div,所有的类和id都在上面。我需要选择具有该类的div的第一个实例。例如: 并且显然再次获得相同的效果,但它不会影响任何div。 现在,如果我要强制它与该div一起使用,我可以这样做: 碰巧它是#content中的第3个div,这毫无意义,因为我需要使用该类获取任何东西的第一个实例。 这是HTML的示例,我已经尝

  • 问题内容: 编辑:我已将此错误报告给Apple,现已关闭,已在Beta iOS 9.0(13A4254v)上进行了测试,并且可以正常运行。 编辑以获得更好的解释: 我在网页中有一堆文章,所有文章都包裹在div(列)中。这些文章的类具有绝对位置,并且宽度和高度固定。 有一个按钮可以应用:-到包装器/列的translation3d-一个window.history.pushState 所有样式都正确地

  • 问题内容: test1 test2 test3 test4 如何选择班级名称为“ 名单的 最后一个孩子” ? 我知道上面的示例不起作用,但是有什么类似的方法可以起作用吗? 重要: a)我不能使用,因为它可能也排在第四或第五位。 b)没有JavaScript。 问题答案: 我建议您利用可以为一个元素分配多个类这样的事实: 最后一个元素具有与其兄弟姐妹相似的类,但也具有可用于设置所需的任何CSS属性的