css class嵌套

css 代码:

<style>
    .chose_bonus {
        font-size:9px;width:400px;border: 2px solid #dddddd;margin-top:5px;margin-bottom:5px;padding:9px;background:#ecf3fc; color:#FFF;
    }
    .chose_bonus.active{  //.chose_bonus .active{  之前是这么写的,不通,后换成上面的方式,就OK 了            background: #ecf3fc url(/ui/common/images/checked-blue.png) no-repeat right bottom;        border: 2px solid #467cbd;
    }
</style>

JS代码:

<script type="text/javascript">
    $(‘.chose_bonus‘).click(function(){
        if ($(this).hasClass("active")) {
            $(this).removeClass("active");
        }else{
            $(this).addClass("active");
        }
    })
</script>

html代码:

            <tr class="bonus">
                <th width="120">可选红包</th>
                <td >
                <!--{loop $bonuslist[‘list‘] $key $bonus}-->
                <div class="chose_bonus" id="{$bonus[‘id‘]}">
                    <span style="font-weight:bold;color:#000;">红包:</span><b style="color:#fbb450;">金额{$bonus[‘total_value‘]}元 剩余:{$bonus[‘balance_value‘]}元</b> <br/>
                    <span style="font-weight:bold;color:#000;">时效:</span><span style="color:#000;font-weight:bold;"> {$bonus[‘start_time‘]}~{$bonus[‘end_time‘]} </span><br/>
                    <span style="font-weight:bold;color:#000;">规则:</span><span style="color:#000;"> {$bonus[‘rule_value‘]}</span>
                </div>
                <!--{/loop}-->
                </td>
            </tr>
时间: 2025-01-16 22:56:36

css class嵌套的相关文章

[CSS]三层嵌套的滑动门

原理: 最外层放水平平铺的背景,第二层放左边,第三层放右边,注意这个做法背景图不能透明 结构: <div class="module-title"> <span class="left"> <span class="right"></span> </span> </div> 样式: .module-title {    height:33px;    background:

深度理解div+css布局嵌套盒子

1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位.  2. 盒子模型 盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们

CSS DIV嵌套于各层底部

网上找了很多例子,不不可行,之后在csdn帖子中找到了,记录一下. 一定要在三层div中设置 style="position:relative;" 效果图: CSS: div{ border:1px solid black; } #content{ height:100%; } #left{ width:20%; height:100%; float:left; position:relative; } #right{ width:78%; height:100%; float:rig

CSS 之 嵌套 margin-top 处理

如下代码: <div style=" width:1000px; height:700px; margin:auto;"> <div style=" width:1000px; height:49px; margin-top:281px; "> <span style="display:inline-block; width:121px; height:49px; margin-left:230px;"> &l

css基础 嵌套的块元素设置外边距

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

Sass学习笔记 -- 嵌套

CSS中的嵌套是特别繁琐的,即便用比较强大的编辑器比如Webstorm来编辑代码,可是在维护的时候还是不能一目了然的去找到对应的代码,我们经常看到类似这样的代码段: #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #eee } 如果用sass来编写的话,这些重复的选择器就只用写一次了,而且可读性也更高了 #conte

HTML+CSS编写规范

在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. 第一节 CSS样式文件的命名 建立样式表文件时,分类编写样式到下列样式表文件中,并统一放在[CSS]文件夹里: 主要 main.css 文字样式 font.css 表格 table.css 主题 themes.css 打印 print.css 补丁 mend.css 在项目初期,会把不同类别的样式

使用LESS构建你的前端CSS(by vczero)

一.为什么要用LESS 很多时候我们觉得CSS只是样式框定,前端的重头戏是JavaScript:其实,很多能用HTML + CSS实现的效果的效率远比使用JS来的划算.LESS是什么?我们为什么要使用LESS呢?Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展性.你是否曾经遇到过这种场景: 定义了一个DIV的宽度是980px,到了另一

快速开发CSS的利器-LESS

快速开发CSS的利器-LESS? 天下功夫,唯快不破!效率,在项目开发上,这是极其重要的.要做到快.精.准,在人任何时候都不是一件轻松容易的事.但是如果借助一些相应的工具,那就另当别论了!那么要想快速开发CSS,是否有相应的工具可使用呢?哈哈,回答是肯定啦!为了满足大家,今天我就来讲讲快速开发CSS的利器-LESS吧! LESS是什么? LESS到底何方神圣?又有何神通?竟然有达到快速开发CSS的神力.其实嘛,LESS就是包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些