html - 列表中的 CSS last-child，每个标签周围都有标签

Question

标签： htmlcss

Answer 1

正确的选择器现在是

a:last-child .tabs__tab-list-item

.tabs {
width: 70%;
margin: 20px;
min-height: 20px;
min-width: 700px;
display: block;
}

.tabs__tab-list {
    display: block;
    padding-left: 30px;
}

.tabs__tab-list-item {
    display: inline-block;
    border-left: 1px solid black;
    border-top: 1px solid black;
    background-color: lightgray;
    padding: 5px 10px 5px 5px;
    color: black;
}

.tabs__tab-list-item:hover {
    background-color: #E8E8E8;
}

.tabs__tab-list-item:active {
    background-color: white;
}

 a:last-child .tabs__tab-list-item {
     background-color: lightblue;
    border-right: 1px solid black;
}

.tabs__tab-list-item--current {
    background-color: white;
}

<div class="tabs">
    <div class="tabs__tab-list">
        <ul>
            <a href=""><li class="tabs__tab-list-item tabs__tab-list-item--active">Look Ups</li></a><!--
            --><a href=""><li class="tabs__tab-list-item">Look Up Types</li></a><!--
            --><a href=""><li class="tabs__tab-list-item">Look Up Relationships</li></a><!--
       --></ul>
    </div>
</div>