CSS：<li>与<a> tag

Question

I'm coding for lines which should be divided by "|". BTW the first element don't need to have separator before. This code doesn't work for me.

.header-level-1 .clearlist li a:before {
content: "|";}

.header-level-1 .clearlist li a:first-child:before {
   content: ""; 
}

<div class="header-level-1">
  <!-- Login -->
  <ul class="clearlist">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
  </ul>
</div>

Answer 1

a将始终是first-child / first-of-type，您需要选择li

.clearlist {
  list-style: none;
}


.clearlist li a:before {
  content: "|";
}

.clearlist li:first-of-type a:before {
  content: "";
}

<div class="header-level-1">
  <!-- Login -->
  <ul class="clearlist">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
  </ul>
</div>

您还可以在:not()中使用li

.clearlist {
  list-style: none;
}

.clearlist li:not(:first-of-type) a:before {
  content: "|";
}

<div class="header-level-1">
  <!-- Login -->
  <ul class="clearlist">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
  </ul>
</div>

Answer 2

因为a将永远是li的第一个孩子。

尝试以下代码段。

.header-level-1 .clearlist li:not(:first-child)  a::before {
content: "|";}

.header-level-1 .clearlist li {
  list-style:none;
  display:inline-block;
}

<div class="header-level-1">
        <!-- Login -->
            <ul class="clearlist">
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
            </ul>
        </div>

在小提琴上检查它。https://jsfiddle.net/nimittshah/6aLocmh9/

：）

Answer 3

.header-level-1 .clearlist li{
    position:relative;
    margin-bottom:5px;
    }
    .header-level-1 .clearlist li a:before {
    content: "";
    position:absolute;    
    width:1px;
    height:100%;
    background:black;
    left:-5px;
    }
    
    .header-level-1 .clearlist li:first-child a:before {
       content: ""; 
       display:none;
    }

<div class="header-level-1">
            <!-- Login -->
                <ul class="clearlist">
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
            </div>

在:before元素上使用某些样式可能会更好

Answer 4

您必须在代码中选择<li>而不是<a>，并选择.clearlist类而不是.header-level-1类。

用此代码替换CSS，然后它应该可以工作：

.clearlist li a:before {
 content: "|";
}

.clearlist li:first-child a:before {
 content: "";
}