发表新帖
发表新帖

CSS :not(:last-child):after selector

前端 未结
关注
8 1783
时光取名叫无心
时光取名叫无心 2020-12-04 05:05

I have a list of elements, which are styled like this:

相关标签:
8条回答
  • 忘掉有多难
    2020-12-04 05:15

    Every things seems correct. You might want to use the following css selector instead of what you used.

    ul > li:not(:last-child):after
    0 讨论(0)
  • 抹茶落季
    2020-12-04 05:18

    You can try this, I know is not the answers you are looking for but the concept is the same.

    Where you are setting the styles for all the children and then removing it from the last child.

    Code Snippet

    li
  margin-right: 10px

  &:last-child
    margin-right: 0

    Image

    0 讨论(0)
  • 深忆病人
    2020-12-04 05:20

    Remove the : before last-child and the :after and used

     ul li:not(last-child){
 content:' |';
}

    Hopefully,it should work

    0 讨论(0)
  • 囚心锁ツ
    2020-12-04 05:25

    For me it work fine

    &:not(:last-child){
            text-transform: uppercase;
        }
    0 讨论(0)
  • 陌清茗
    2020-12-04 05:27

    If it's a problem with the not selector, you can set all of them and override the last one

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

    or if you can use before, no need for last-child

    li+li:before
{
  content: '| ';
}
    0 讨论(0)
  • 无人共我
    2020-12-04 05:28

    Your sample does not work in IE for me, you have to specify Doctype header in your document to render your page in standard way in IE to use the content CSS property:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

    Second way is to use CSS 3 selectors

    li:not(:last-of-type):after
{
    content:           " |";
}

    But you still need to specify Doctype

    And third way is to use JQuery with some script like following:

    <script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

    Advantage of third way is that you dont have to specify doctype and jQuery will take care of compatibility.

    0 讨论(0)
 看不清?
提交回复
热议问题