Question

我在使用我的代码处理伪类时遇到了问题。有问题的代码是一个水平有序列表，它位于滑块的顶部。该列表被拉伸以填充滑块的完整水平宽度。我通过为列表元素中包含的链接指定边框，在每个列表元素上放置一个左边框（这样边框不会使列表太宽）。

但我想删除第一个链接的左边框，以便只在每个列表元素之间显示边框，而不是在第一个或最后一个列表元素上显示。

当我向链接添加第一个子类时，问题就出现了。伪类似乎将类分配给所有链接。

这就是我所拥有的：

CSS

ol.bjqs-markers{
    display:inline-block;
    list-style:none;
    margin:0;
    padding:0;
    z-index:9999; 
    width:100%; 
    position:absolute;
    top:0px;
    }


 ol.bjqs-markers li{
     display:inline;
     float:left;
     height:30px;
     width:20%;
     background:rgba(0,0,0,0.7);
     float:left;
     margin:0 0px;
}

 ol.bjqs-markers li a{
    display:block;
    font-size:22px;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    height:100%;
    display:block;
    overflow:hidden;
    border-left:1px solid #F00;
}

 ol.bjqs-markers li a:first-child{
    border-left:none;
}

和HTML：

<ol class="bjqs-markers">
<li class="active-marker"><a href="#">Example</a></li>
<li class=""><a href="#">Example</a></li>
<li class=""><a href="#">Example</a></li>
<li class=""><a href="#">Example</a></li>
<li class=""><a href="#">Example</a></li>
</ol>

有人能指出我为什么a：first-child对所有标签应用“none”的边框？

谢谢你们！

Answer 1

：第一个孩子的工作方式与预期的一样，但您示例中的每个A都是第一个孩子。这是其父母LI的第一个孩子。

您正在寻找的是：

ol.bjqs-markers li:first-child a {}

Answer 2

这是因为您将此伪类应用于li元素中的第一个链接。使用

ol.bjqs-markers a:first-child {
  border-left:none;
}

或

ol.bjqs-markers li:first-child a {
  border-left:none;
}

Answer 3

也许你想做

ol.bjqs-markers li:first-child a{

Answer 4

它是因为您正在将边框应用于第一个＆lt; a＆gt;每个＆lt; li＆gt;中的标记标签。试试这个：

 ol.bjqs-markers li:first-child a { }

第一个子伪类不适用于<a> tag</a>

4 个答案: