css active（手机端css怎么实现active改变点击的元素背景色）

本文目录

• 手机端css怎么实现active改变点击的元素背景色
• 在css中class=“active”什么意思
• CSS里的a:active 是干什么用的，请举例说明
• css 中li.active
• css active问题
• CSS :active对嵌套的div不起作用

手机端css怎么实现active改变点击的元素背景色

1. :active选择器用于选择活动链接。

2. 当在一个链接上点击时，它就会成为活动的激活的。

3. :active选择器适用于所有元素，不仅限于链接a元素。

4. :focus，:focus 选择器用于选取获得焦点的元素。

5. 仅接收键盘事件或其他用户输入的元素允许 :focus 选择器。

1. a{display：block，width：60px，height:40px，把每个导航超链接a标签都设置成块儿，设置好尺寸，具体根据图片的尺寸。

2. 不做成块儿，就无法设置宽高，也就看不到你设置的背景图片。

3. a:hover{background:url(images/bg_2.jpg);}举例的这个bg_2.jpg就是鼠标放上去之后先是的背景图片。

在css中class=“active”什么意思

class说明是一个类，class=“active”本身这句是html代码，如果在css里设置样式应该在类名前加个点，如.active{}，从经验看，active这个类一般用在导航条中当前高亮的栏目，或者选项卡中当前活动着的选项

CSS里的a:active 是干什么用的，请举例说明

定义链接在鼠标被激活（点下去）时候的样式。操作方法如下：

1、新建一个html文件，命名为test.html，a标签四个不同的伪类，有不同的效果。

2、利用a标签伪类改变字体的颜色。下面代码实现了a标签的默认颜色为红色，点击链接过后，颜色变为绿色，当鼠标放在连接上显示粉红色。

3、利用a标签伪类改变字体的大小。下面代码实现了a标签的默认大小为20px，点击链接过后，大小变为40px。

4、利用a标签伪类改变链接的背景颜色。下面代码实现了a标签的默认背景颜色为红色，点击链接过后，背景颜色变为绿色。

5、利用a标签伪类改变链接的字体。下面代码实现了a标签的默认字体为Monospace，点击链接过后，字体变为Arial。

6、最后利用a标签伪类去掉连接默认的下划线。下面代码实现了a标签在任何状态下都没有下划线。

css 中li.active

如果点中间有个空格：li .active{color:red;}
意思是选择 li 的子元素类名为 active 的元素对其生效：《li》《a class=“active“》Link《/a》《/li》

如果点中间没有空格：li.active{color:red;}
是选择类名为 active 的 li 对其生效：
《li class=“active“》对我生效《/li》
《li》对我无效《/li》

css active问题

修改后的代码：
《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》
《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》
《title》无标题文档《/title》
《style》
/*未点击项状态颜色*/
.bb{width:100px;}
.bb a:link{color:#0000ff;text-decoration:none;}
.bb a:visited{color:#0000ff;text-decoration:none;}
.bb a:hover{color:#ff0000;text-decoration:none;}
.bb a:active{color:#0000ff;text-decoration:none;}
/*点击项状态颜色*/
.aa{width:100px;}
.aa a:link{color:#000000;text-decoration:none;}
.aa a:visited{color:#000000;text-decoration:none;}
.aa a:hover{color:#ff0000;text-decoration:none;}
.aa a:active{color:#000000;text-decoration:none;}
《/style》
《/head》
《script type=“text/javascript“》
《!--
function changeColor(obj){
var str=document.getElementsByTagName(“li“);
for(var i=0;i《str.length;i++){
str[i].className=“bb“;
}
obj.className=“aa“;
}
--》
《/script》

《body》
《div 》
《div 》
《div 》《span 》当前位置-》 会员中心《/span》《/div》
《div 》《span》欢迎您 早上好！ 《a href=“#“》 新消息(4)《/a》 《a href=“#“》 退出系统《/a》《/span》《/div》
《/div》
《div 》
《div》会员中心《/div》
《div 》基本资料管理《/div》
《div id=“aaa“》
《ul》
《li id=“cc“ class=“aa“ onClick=“changeColor(this);“ 》《a href=“#“》基本资料完善《/a》《/li》
《li id=“cc“ class=“bb“ onClick=“changeColor(this);“ 》《a href=“#“》密码修改《/a》《/li》
《li id=“cc“ class=“bb“ onClick=“changeColor(this);“ 》《a href=“#“》平台销售额《/a》《/li》
《li id=“cc“ class=“bb“ onClick=“changeColor(this);“ 》《a href=“#“》评价管理《/a》《/li》
《li id=“cc“ class=“bb“ onClick=“changeColor(this);“ 》《a href=“#“》信誉度《/a》《/li》
《li id=“cc“ class=“bb“ onClick=“changeColor(this);“ 》《a href=“#“》交易记录管理《/a》《/li》
《/ul》
《/div》

《/div》
《/div》
《/div》
《/body》
《/html》

CSS :active对嵌套的div不起作用

看了你结构，sysBtn类所在的div内，你又嵌套了2个div，如果你想让sysBtn所在的div实现active效果，做法如下：

将div改成内联元素，即可实现你的背景变换效果，因为div为块级，会将父层元素遮挡了。

有问题可以继续问我，望采纳！