当前位置：Gxlcms > html代码 > HTML新手求解。关于CSS对于li标签的active状态的背景颜色_html/css_WEB-ITnose

HTML新手求解。关于CSS对于li标签的active状态的背景颜色_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：466人阅读

譬如对于

我在自己创建的样式表
.test li {
color:#000000;
float: none;
width: 200px;
background: #f9f2f4;
margin-bottom: 3px;
line-height: 80px;
}
问题：怎么样设定li标签在

这种情况下背景颜色变成另外的。

譬如用bootstrap的样式表的时候，在给定的

之类的里面的li标签显示

就会直接运行HTML以后在一个标签处显示出背景颜色的变化
怎么修改样式表能让我在自己静态设计中，自己声明了

后能得到不同的背景颜色
不好意思了大神，我感觉代码不多，所以直接贴了。。

回复讨论(解决方案)

.test #ul li.active{ background:#.... }

.test #ul li a{ disaplay:inline-block; background:#....}.test #ul li a:active{ background:#.... }

.test #ul li.active{ background:#.... }

.test #ul li a{ disaplay:inline-block; background:#....}.test #ul li a:active{ background:#.... }

大神。我套用你的代码。但是好像没有用啊。首先我link css了。然后在body里是这样的

在我引用的样式表里是这样的

.test li {    color: #f5f5f5;    float: none;    width: 200px;    background: #101010;    margin-bottom: 3px;    line-height: 60px;    list-style-type: none;}.test a {    color: #f5f5f5;    padding-left: 60px;}.test li:hover {    display: inline-block;    color: #000000;    float: none;    width: 200px;    background: #06b2e3;    margin-bottom: 3px;    line-height: 60px;}.test #ul li.active {    display: inline-block;    color: #000000;    float: none;    width: 200px;    background: #f5f5f5;    margin-bottom: 3px;    line-height: 60px;}.test #ul li a {    display: inline-block;    color:#000000;    float: none;    width: 200px;    background:  #f5f5f5;    margin-bottom: 3px;    line-height: 60px;}.test #ul li a:active {    background: #f5f5f5;    float : none;    width: 200px;    margin-bottom: 3px;    line-height: 60px;}

目前而言进去网站就是黑背景白字的li标签，鼠标移到上面背景会变成蓝色。但是我设置为class="active"的BBB背景不是我设定的白色的。

还是说想要在网页一开始就显示不同的active需要js？
具体要怎么写？求大神告知。
bootstrap的bootstrap.min.css检索script太多了。不太好找啊

background:#fff;才是白色背景。。。

HTML新手求解。关于CSS对于li标签的active状态的背景颜色_html/css_WEB-ITnose

人气教程排行