如何在我的活动按钮中添加不同的背景色

Question

我试图在按钮处于活动状态时为其提供不同的背景色。HTML代码如下所示。

<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- some content -->
</div>
<div id="tab2" class="tab">
<!-- some content -->
 </div>
 <div id="tab3" class="tab">
 <!-- some content -->
 </div>
 <ul class="tab-links">
 <li class="active">
 <a href="#tab1"><span class="numer_viti">bla bla</span>
 <p class="arrow-up"><p class="cmimet_ne_vite">BUTTON ACTIVE</p></p></a>
 </li>
 <li>
 <a href="#tab2"><span class="numer_viti">bla bla</span>
 <p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
 </li>
 <li>
 <a href="#tab3"><span class="numer_viti">bla bla</span>
 <p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
 </li>
 </ul> 
 </div>
 </div>  

我在CSS文件中使用了这两个代码，没有发现任何事情：

这是我的项目的CSS代码：

.cmimet_ne_vite:active
{
 background:#787878;
}
.cmimet_ne_vite.active
{
 background:#787878;
}

那么谁知道是问题在帮我解决呢？

Answer 1

没有同时具有类"cmimet_ne_wite"和"active"的元素。相反，您有一个.cmimet_ne_vite元素，它是.active元素的后代，因此您需要使用：而不是.cmimet_ne_vite.active

.active .cmimet_ne_vite {
    background:#787878;
}

此外，不能将两个<p>元素包装在一起。浏览器会将其渲染为两个独立的元素。更改：

<p class="arrow-up">
    <p class="cmimet_ne_vite">BUTTON</p>
</p>

收件人：

<p class="arrow-up">
    <span class="cmimet_ne_vite">BUTTON</span>
</p>

或者类似的东西。

最后，如果这个元素打算用作按钮，您需要将role属性设置为"button"：

<span class="cmimet_ne_vite" role="button">BUTTON</span>