如何为另一个元素内的元素添加CSS样式颜色

Question

我有一个东西设置为

#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捕获并添加到列表中的。

Answer 1

不确定我是否理解正确。

喜欢吗？

ps：同样在您的注释中，您指定的是ID #deleteButton，但它设置为class。

#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>

Answer 2

您可以简单地执行以下操作：

#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>