<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. （1.2）DML增强功能-4大排名函数与top ties/tablesample

    关键字:sql server窗口函数.分析函数.四大窗口函数 1.row_number()  over( partition by column order by column) (1)测试数据 (2 ...

  2. mysql 数据操作 单表查询 concat_ws() 定义显示格式

    有个需求用concat以这种格式打印查询 mysql> select concat(name,':',age) from employee; +----------------------+ | ...

  3. 【spring mvc】application context中【bean】的生命周期

    生命周期过程 主要分为四部分: 一.实例化 1. 当调用者通过 getBean( name )向 容器寻找Bean 时,如果容器注册了org.springframework.beans.factory ...

  4. 翻译：Bing地图瓦片体系

    Bing Maps Tile System Bing地图瓦片体系 原文链接:http://msdn.microsoft.com/en-us/library/bb259689.aspx Bing Map ...

  5. EOS 的网站及资料doc

    https://github.com/EOSIO/Documentation/blob/master/zh-CN/Roadmap.md https://bytemaster.github.io/bit ...

  6. 【转】Deep Learning（深度学习）学习笔记整理系列之（四）

    九.Deep Learning的常用模型或者方法 9.1.AutoEncoder自动编码器 Deep Learning最简单的一种方法是利用人工神经网络的特点,人工神经网络(ANN)本身就是具有层次结 ...

  7. java基础知识面试题(1-40)

    1.面向对象的特征有哪些方面?答:面向对象的特征主要有以下几个方面:- 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注这些 ...

  8. BCB中换行 需要 \r\n

    例如: fprintf(fp,"\n");无换行效果 fprintf(fp,"\r\n");有换行效果

  9. activiti 数据表设计

    activiti数据表分为5个部分: 通用数据表.流程存储表.身份数据表.运行时数据表.历史数据表 1.通用(general)数据表 以ACT_GE开头 资源表-act_ge_btyearray: 用 ...

  10. 给iphone配置qq邮箱

    在手机上使用qq邮箱发送和接受邮件,但是又不用qq邮箱,我用的是“网易邮箱大师” ,那么就需要配置服务. 1.在qq邮箱中设置邮箱,开启相关的服务,然后用手机发送短信来生成授权码.最后在手机上设置的密 ...