1.一个DIV中既有class又有id

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <style type="text/css">

            #box1{color:red;}

            .box1{color:blue;}

            .box2{color:blue;}

            #box2{color:red;}

        </style>

    </head>

    <body>

        <div  class="box1" id="box1">

            Hello

        </div>

        <div  class="box2" id="box2">

            Word

        </div>

        <!--说明id作用力大于class，且与位置无关-->

    </body>

</html>

2.一个div中有多个class

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <style type="text/css">

            .red {color:red;}

            .blue{color:blue;}

        </style>

    </head>

    <body>

        <div  class="red blue" >

            Hello

        </div>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <style type="text/css">

            .blue{color:blue;}

            .red {color:red;}

        </style>

    </head>

    <body>

        <div  class="red blue" >

            Hello

        </div>

    </body>

    <!--结果是：第一个是蓝色，第二个是红色。

    说明：有两个类，会按照div引用的class中，在css中最后一个定义为准-->

</html>

3.伪类选择器与class

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <style type="text/css">

            /*下边执行顺序不影响结果*/

            .red {color:red;}

            .red>div:first-child{color:pink;}/*作用域第1*/

            .red>div{color:blue;}/*作用域第2*/

            .green {color:green;}/*作用域第3*/

        </style>

    </head>

    <body>

        <div  class="red" >

            <div class="green">

                Hello<!--颜色为pink-->

            </div>

        </div>

    </body>

</html>

总结一下：作用力排名

第一名：ID

第二名：伪类选择器（里边还有比较）

第三名：class（多个class，以css定义最后那个为准）

css--多重样式的更多相关文章

  1. CSS 之 样式优先级机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 1.一般情况下,优先级从低到高,如下: 浏览器缺省(即浏览器默认) →(外部样 ...

  2. 精简的网站reset 和 css通用样式库

    参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

  3. css初始化样式代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...

  4. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  5. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  6. html / css打印样式

    最近做公司后台系统,需要打印贴箱标签,按照正常打印A4纸的标准,测试的效果不是自己想要的,文字排版布局都乱了,查了一些资料,需要设置的东西我总结了一下: 显示器(screen)和打印机(printer ...

  7. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  8. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  9. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

  10. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

随机推荐

  1. Flexible 弹性盒子模型之CSS justify-content 属性

    实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏 ...

  2. 使用redis缓存数据需要注意的问题以及个人的一些思考和理解

    之前我有博客也尝试过使用redis,在实际的项目中确实作用挺大的.至少对于数据的频繁读取来说都起着至关重要的作用. 但是随着技术的学习,慢慢的业务要复杂起来,以后也许会用到redis集群,所以在这边查 ...

  3. mysql添加mcafee 审计插件

    插件源码地址https://github.com/mcafee/mysql-audit插件安装方法https://github.com/mcafee/mysql-audit/wiki/Installa ...

  4. Time.timeScale、游戏暂停

    原文链接 项目里面一直在用Time.timeScale来做游戏的 1倍 2倍整体加速,今天我仔细看了一下Time.timeScale才发现之前我理解错了一些东西. Time.timeScale可以控制 ...

  5. Map - leetcode [哈希表]

    149. Max Points on a Line unordered_map<float, int> hash 记录的是斜率对应的点数 unordered_map<float, i ...

  6. mysql的注释

    一直没怎么用过mysql数据库, 今天用mysqldump备份了一下表结构, 记录一下遇到的问题 1. mysqldump默认导出没有事务和存储过程, 如果想导出这些可以用 -E 和 -R[--rou ...

  7. 安装 zabbix 时遇到的一个问题

    安装 zabbix 2.0.3,到最后阶段,遇到一个问题: PHP bcmath extension missing,  php configuration parameter --enable-bc ...

  8. jmeter命令行运行-分布式测试

    上一篇文章我们说到了jmeter命令行运行但是是单节点下的, jmeter底层用java开发,耗内存.cpu,如果项目要求大并发去压测服务端的话,jmeter单节点难以完成大并发的请求,这时就需要对j ...

  9. 使用 voluptuous 校验数据

    在 Python 中,我们经常需要对参数进行校验,这是我们有好多种方法,例如写很多 if 啊,或者写正则表达式啊等等,技巧高的人可以写得很巧妙,而技巧一般的人呢,可能会写得很冗长,例如我,经常就不能很 ...

  10. ES 6 : Math对象的扩展

    ES6在Math对象上新增了17个与数学相关的方法.所有这些方法都是静态方法,只能在Math对象上调用. 1.Math.trunc() Math.trunc方法用于去除一个数的小数部分,返回整数部分. ...