0

我有一个设置为

#messages li { 
    padding: 5px 10px; 
    background: pink; 
    color:red;
}
/*
What I tried but didn't work:
#messages li #deleteButton { 
    background: pink; 
    color:lightblue;
}
*/
#messages li:nth-child(odd) {
    background: lightblue; 
    color:blue;
}
.deleteButton {
    border:0;
    padding:5px;
    border-radius:25px;
}
<ul id="messages">
    <li id="72828282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="65885852">User:Message<button class="deleteButton">Delete</button></li>
    <li id="32235282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="99609282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="28287282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="52828282">User:Message<button class="deleteButton">Delete</button></li>
</ul>

我想要的是偶数消息中的按钮具有奇数消息的配色方案，反之亦然。我想在不使用两个单独的类的情况下实现这一点，因为消息被捕获并通过 JS 添加到列表中。

4

2 回答 2

2

不确定我是否理解正确。

像这样？

ps：同样在您的评论中，您的目标是一个 id #deleteButton，但它被设置为类。

#messages li { 
    padding: 5px 10px; 
    background: pink; 
    color:red;
}

#messages li button {
    background-color: lightBlue;
    color: blue;
}

#messages li:nth-child(odd) {
    background: lightblue; 
    color:blue;
}

#messages li:nth-child(odd) button {
    background-color: pink;
    color: red;
}

.deleteButton {
    border:0;
    padding:5px;
    border-radius:25px;
}
<ul id="messages">
    <li id="72828282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="65885852">User:Message<button class="deleteButton">Delete</button></li>
    <li id="32235282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="99609282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="28287282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="52828282">User:Message<button class="deleteButton">Delete</button></li>
</ul>

于 2018-10-30T21:54:38.430 回答
1

你可以简单地这样做：

#messages li { 
    padding: 5px 10px; 
    background: pink; 
    color:red;
}

#messages li:nth-child(odd) .deleteButton { 
    background: pink; 
    color:red;
}
#messages li:nth-child(even) .deleteButton { 
    background: lightblue; 
    color:blue;
}

#messages li:nth-child(odd) {
    background: lightblue; 
    color:blue;
}
.deleteButton {
    border:0;
    padding:5px;
    border-radius:25px;
}
<ul id="messages">
    <li id="72828282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="65885852">User:Message<button class="deleteButton">Delete</button></li>
    <li id="32235282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="99609282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="28287282">User:Message<button class="deleteButton">Delete</button></li>
    <li id="52828282">User:Message<button class="deleteButton">Delete</button></li>
</ul>

于 2018-10-30T21:55:58.037 回答