css nthchild嵌套问题属性，仅适用于第一个元素

chhkpiq4 于 2023-02-10 发布在其他

关注(0)|答案(1)|浏览(138)

我对第n个孩子的财产有意见。
问题出在#subnav元素上。我不明白为什么第n个子元素不起作用（假设要更改边框颜色和宽度）。
这里我的问题和代码：

<div class="container">
<!-- subnav -->
<ul id="subnav">
      <li><a href=""><span>Philosophie</span></a></li>
      <li><a href=""><span>Musiciens</span></a></li>
      <li><a href=""><span>Programmes</span></a></li>
      <li><a href=""><span>Médias</span></a></li>
      <li><a href=""><span>Agenda</span></a></li>
</ul>

还有那些无礼的

.container {
    #subnav {
        margin-top: 2rem;
        display: flex;
        justify-content: space-evenly;
        li {
            padding-bottom: 0.5rem;
            border-bottom: 4px 0.5rem;
            border-color: solid #f36e52;
        }
        a {
            color: #fff;
            text-decoration: none;
            span:nth-child(1):after, span:nth-child(2):after{
                content: '';
                height: 4px;
                text-align: right;
                float:right;
                margin-top: 0.3rem;
            }
            span:nth-child(1):after {
                width: 30%;
                background-color: #f36e52;
                
           }
            span:nth-child(2):after {
                content: '';
                width: 100%!important;
                background-color: #fff555;
            }
        }
    }
}

我想改变宽度，也是每个链接的颜色，但它只需要span:nth-child(1)的属性。
知道了吗？谢谢你的帮助

css

来源：https://stackoverflow.com/questions/75342788/nthchild-nested-problem-property-that-just-apply-on-the-firt-element

1条答案

按热度按时间

eqzww0vc1#

它们都是第一子（或第n子（1）），您应该在li上使用nth-child来正确选择。
要更改链接的颜色，您应该直接在span上写入color属性，而不是：after。
最终代码应该如下所示：

#subnav {
    li {
        &:nth-child(1) {
            span {
                color: red;
            
                &:after {
                    content: '';
                    /*some code*/
                }
            }
        }
        &:nth-child(2) {
            span {
                color: green;
            
                &:after {
                    content: '';
                    /*some code*/
                }
            }
        }
    }
}

赞(0）回复(0）举报 2023-02-10

我来回答

css nthchild嵌套问题属性，仅适用于第一个元素

1条答案

相关问题

热门标签

最新问答