li.active2有加强重要性的效果。

<!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=utf-8" />
<title>无标题文档</title>
<style>
    .contain li{
        width: 100px;
        height: 20px;
        float: left;
        background: blue;
        list-style:none;
        border-right: 1px solid white;
    }
    .active{
        background: red;
    }
    li.active2{
        background: red;
    }
</style>
</head>
<body>
<ul class="contain">
    <li></li>
    <li class="active"></li>
    <li class="active2"></li>
</ul>
</body>
</html>

active想改变颜色,却没有起效果,只有li.active2才有效果。

时间: 2024-11-21 02:01:01

li.active2有加强重要性的效果。的相关文章

实现移动端上拉加载效果

毕设终于结束了,做了一个webApp,从中学习到了很多,页面有用到上拉加载的效果.今天就整理了一下. 上拉加载的实现思路其实很简单: 1.移动端触发touchmove事件(上拉) 2.判断最后一个元素是否已出现在底部 3.若出现,则js添加元素到页面末尾 思路图: 接下来开始编写style样式: html,body{ margin: 0px; width: 100%; height: 100%; } li{ list-style: none; } #personkit_article_ul{ w

图片提示效果

效果: CODE: <!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 content="t

dede文章列表加上序号效果

dede文章列表加上序号效果 css代码部分 <style type="text/css"> <!-- .downtop { FLOAT: left; OVERFLOW: hidden; WIDTH: 218px; HEIGHT: 278px } .downtop UL.text { MARGIN: 0px 10px; WIDTH: 198px; PADDING-TOP: 5px } .downtop UL.text LI { WIDTH: 198px } .down

jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发

详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的banner图片切换效果. 写法很简单,网页初学者们或者wenbapp初学者们可以拿去学习学习,也可以在这基础上加上手机的图片滑动切换效果.废话不多说,下面说说这个简单的图片切换的效果吧! 首先以下是图片切换的效果图:   图片切换效果html内容: <div class="tyna2"&

手风琴和选项卡效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>注资流程</title> <link rel="stylesheet" href="css/common.css"/> <link rel="stylesheet" href=&q

第一次自己写的轮播效果

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>轮播图带遮罩层</title> <style type="text/css"> html,body,ul,li{ width: 100%;min-wid

写了一个好玩的弹性列表效果

闲来没事,随遍写写,有需要的尽管拿去用. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #list{ width:302px; margin:50px auto; padding:0; list-style: none; } #list li{

html基础 ul li 无序列表的嵌套

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome / Firefox                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset=&quo

jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码

转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next()  :  获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元素后插入指定的内容. 综合起来,核心代码为 $(".content li").click(function() {       // 点击li元素时     if($(this).next())                    // 如果存在下一个元素         $(this)