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

你没有两个类的元素＆＃34; cmimet_ne_vite＆＃34; 和＆＃34;有效＆＃34;。相反，您有一个.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属性设置为＆＃34;按钮＆＃34;：

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

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

1 个答案: