您的当前位置：首页 HTML新手求解。关于CSS对于li标签的active状态的背景颜色_html/css_WEB-ITnose

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

来源：九五美食网

譬如对于

AAA

BBB

CCC

DDD

EEE

FFF

我在自己创建的样式表
.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里是这样的

AAA

BBB

CCC

DDD

EEE

FFF

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

.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;才是白色背景。。