<ul class="skin">

        <li id="skin_0" title="蓝色" class="selected">蓝色</li>

        <li id="skin_1" title="紫色">紫色</li>

        <li id="skin_2" title="红色">红色</li>

        <li id="skin_3" title="天蓝色">天蓝色</li>

        <li id="skin_4" title="橙色">橙色</li>

        <li id="skin_5" title="浅绿色">浅绿色</li>

    </ul>

css中：

#skin_0.selected{background-position:0px 0px;}

#skin_1.selected{background-position:15px 0px;}

#skin_2.selected{background-position:35px 0px;}

#skin_3.selected{background-position:55px 0px;}

#skin_4.selected{background-position:75px 0px;}

#skin_5.selected{background-position:95px 0px;}
#id.class的意思是一个元素定义了一个id的同时还具备对应的一个class样式。例如#skin_0.selected这个样式，就只有在li定义了id为skin_0的同时还定义了.selected的时候才会生效，如果只是给li单单定义一个selected，这个样式是不会生效的。

因为你的这一段css代码里面，列表里的6个LI的背景是一个大图里面的六个部分，所以就要单独定义每一个li的背景，但一个li被选中时，JS会给它加上一个selected的CLASS，如果直接写成.selected，就不能单个定义这6个li被选中的状态了~~

css中用#id.class的形式定义样式，为什么这样用，不直接写成.class.代码如下：#skin_0.selected{}这种的的更多相关文章

  1. CSS根据子元素个数不同定义样式

    近日面试,遇见了一个这样的问题,不会,便记下来. 问题:如何根据子元素个数的不同定义不同的样式? 代码:HTML <ul> <li>1</li> <li> ...

  2. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  3. 深入理解脚本化CSS系列第四篇——脚本化样式表

    × 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...

  4. CSS中id与class命名规则及编码最佳习惯

    一.用class_name方式写类名. 以前喜欢用class-name写,不过好像两样也没什么差别.但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度.但是id我会写 ...

  5. html css中id和class的区别比较

    在定义样式的时候,有时候会将id和class的用法弄混淆,所以在这里特意说明一下: id和class属性是网页中两个通用的属性,它们协同工作使整个页面变得丰富多彩.当我们为一个元素定义样式时.可以使用 ...

  6. 林大妈的CSS知识清单（一）添加样式

    回顾CSS选择符,学习接入样式的更多方式. 一.选择符 1. 种类 ① 类型选择符:直接的HTML标签名,例如: body.p.div 等: ② 后代选择符:空格,例如: div p 选择div中的所 ...

  7. 关于读style元素定义样式表兼容性

    <span style="font-size:18px;"></span><pre name="code" class=" ...

  8. css遇到的那些坑——浏览器默认样式设置

    今天自己写css样式,其中用到了<ul>标签,设置了一系列效果后运行,发现位置与设置有出入.chrome上打开检查项,发现<ul>标签的styles底部多了以下一段: ul,  ...

  9. WPF 样式（定义样式、引用样式、样式作用域、Trigger触发器）

    1.定义 资源字典   <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presenta ...

随机推荐

  1. python 面向对象 私有属性

    __init__构造函数 self.name = name # 属性, 实例变量,成员变量,字段 def sayhi()# 方法, 动态属性 私有属性不对外看到 前面加上__ class role() ...

  2. [WorldWind学习]19.WebDownload

    using System; using System.Diagnostics; using System.Globalization; using System.Net; using System.I ...

  3. tcpdump-抓包工具-Linux

    环境:VMware-Workstation-12-Pro,Windows-10,CentOS-6.9-x86_64,Xshell5 基本介绍 tcpdump是Linux自带的抓包工具,可以详细看到计算 ...

  4. django-生成随机验证码

    Python生成随机验证码,需要使用PIL模块. 安装: pip3 install pillow 1   1 pip3 install pillow 基本使用 1.创建图片 from PIL impo ...

  5. idea中使用Mybatis plugin

    一.安装. 1. 2. 二.使用. 1. 2.

  6. 【UI】android如何绘制一个饼图

    代码下载 需求 1:实心饼图,颜色填充百分比区域 2:带区域说明 3:饼图有阴影 思路:这个其实和绘制进度条原理差不多,都是360度根据所占百分比算出绘制弧度,然后调用canvas的画弧函数. 阴影其 ...

  7. OpenCV图像增强算法实现（直方图均衡化、拉普拉斯、Log、Gamma）

    http://blog.csdn.net/dcrmg/article/details/53677739 1. 基于直方图均衡化的图像增强   直方图均衡化是通过调整图像的灰阶分布,使得在0~255灰阶 ...

  8. linux内核与分析 心得与体会

    作业目录: (1)计算机是如何工作的:http://www.cnblogs.com/20135335hs/p/5213394.html (2)操作系统是如何工作的:http://www.cnblogs ...

  9. Codeforces Round #526 (Div. 1)

    毕竟是上紫之后的第一场div1,还是太菜了啊,看来我要滚回去打div2了. A. The Fair Nut and the Best Path 这题本来是傻逼贪心dfs,结果我越写越麻烦,然后就只有1 ...

  10. taglist-plus 安装使用

    taglist 可以查看文件中的 类,函数,变量等信息. 在.vimrc中添加: Plugin 'taglist-plus' 然后打开vim编辑器 PluginInstall 使用: 打开taglis ...