CSS优先级原则（jquery css给文本增加随机色彩）

来源：互联网发布：php为什么比aps.net好编辑：程序博客网时间：2024/06/06 02:22

1、css代码（注意优先级权重）

/* 样式的优先级        内联样式表的权值最高 1000；ID 选择器的权值为 100；Class 类选择器的权值为 10；HTML 标签选择器的权值为 1。        优先原则：选择器都有一个权值，权值越大越优先；当权值相等时，后出现的样式表设置要优于先出现的样式表设置；        创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式； 继承的CSS 样式不如后来指定的CSS 样式；        在同一组属性设置中标有“!important”规则的优先级最大； */.page-content .content-item .table a.c1{color: #d78a2f !important;}/* 优先级最大 */.page-content .content-item .table a.c2{color: #9307db !important;}.page-content .content-item .table a.c3{color: #d2d42e !important;}.page-content .content-item .table a.c4{color: #41c13a !important;}.page-content .content-item .table a.c5{color: #0785db !important;}.page-content .content-item .table a.c6{color: #7cc67b !important;}.page-content .content-item .table a.c7{color: #07dbd4 !important;}

2、js代码

// 遍历a标签$(".page-content .content-item .table a").each(function(index){$(this).addClass("c"+randValue());//$(this).css('color','#41c13a');})//生成1~7的随机数function randValue() {   return (Math.floor(Math.random() * 7) + 1);}

3、jsp代码

<div class="page-content">        <div class="content-item jkzx">            <div class="title">                <div class="text fl">疾病</div>            </div>            <div>            <table class="table">            <c:forEach items="${sicknessMap.entrySet()}" var="sickEntry" varStatus="curStatus">            <c:if test="${(curStatus.index)%2 == 0}">            <tr>            </c:if>            <td class="t"><a>${sickEntry.getKey()}</a></td>            <td class="l">            <c:forEach items="${sickEntry.getValue()}" var="sickMap" >            <a href="${ctx}/info/index/${sickMap.SICK_ID}">${sickMap.SICK_NAME}</a>            </c:forEach>            </td>            <c:if test="${(curStatus.index)%2 == 1}">            </tr>            </c:if>                        </c:forEach>                </table>            </div>        </div></div>

4.效果

0 0