CSS覆盖公共样式中的某个属性
CSS如何覆盖公共样式中的某个属性？利用CSS样式的优先级。
如下例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.x{color: red;}
.a .x{color:blue;}
.a .b .x{color:green;}
</style>
</head>
<body>
<div class="x">你好</div>
<div class="a">
<div class="x">你好</div>
</div>
<div class="b">
<div class="x">你好</div>
</div>
<div class="a">
<div class="b">
<div class="x">你好</div>
</div>
</div>
</body>
</html>
页面上字体颜色从上到下，依次是红、蓝、红、绿
有层级关系的样式，越精确的优先级越高。
利用这一个 特点，当公共样式中，当有需要特殊处理的样式，可以使用此种方法：
在当前样式前的父级，添加一个独一无二的样式名称。
另外，当父级中有多个样式的时候，如下：
<div class="a b">
<div class="x">你好</div>
</div>
可以定义两个父级样式中的任何一个
<style type="text/css">
.a .x{color:blue;}
.b .x{color:green;
</style>
如果同时定义了两个父级样式，这个时候字体的颜色就与css中，这两个父级样式的顺序有关了，后加载的样式优先，此时后加载的是.b .x，所以字体颜色是绿色
CSS覆盖公共样式中的某个属性的更多相关文章
- 针对firefox ie6 ie7 ie8的css样式中的line-height属性
针对firefox ie6 ie7 ie8的css样式中的line-height属性 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对! ...
- 这些Android系统样式中的颜色属性你知道吗？
Android 系统样式中的颜色属性 推荐阅读看完后彻底搞清楚Android中的 Attr . Style .Theme 几个常用的颜色属性 先放上一张经典的图片,图片来自网络. 这张图在网上很是流传 ...
- reset.css css重置公共样式
@charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...
- css覆盖select样式并添加小箭头
.select { border-radius: 5px; border: 1px #F4A627 solid; -webkit-appearance: none;//清除默认样式 backgroun ...
- css常用公共样式
/*style reset*/ body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,form,input,textarea,select{padding:0; margin:0;fon ...
- js--script和link中的 integrity 属性
<link crossorigin="anonymous" integrity="sha256-+hDz/gVbhp24mhOmoIT4Du4F3K5fs9fjjo ...
- css样式表中四种属性选择器
学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...
- 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性
如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...
- 修改css样式+jq中的效果+属性操作+元素操作
:checked 选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color '); //300px 2.参数是属性名,属性值,逗号分隔,是 ...
随机推荐
- 5分钟教你学会Django系统错误监控
一.监控所有的request请求 如何实现系统监控,自动发送错误日志的邮件呢? 只需配置配置settings文件即可. 1.设置发送邮件配置信息 邮件会发送到ADMINS设定的邮件列表中. SERVE ...
- VS2017上执行VS2013项目错误MSB802之解决方案
进行想把我编写的数字图像处理软件MagicHouse更新到最新的VS2017开发环境下,原来的开发环境是VS2013.但是用VS2017打开项目并编译时,系统报错误MSB802,如下图所示. 其实Vi ...
- 走近SpringBoot
(博客园不支持MarkDown编辑,看完整版请移步:https://www.zybuluo.com/Allen-llh/note/1199946) 1. (Building a RESTful Web ...
- Adobe PhotoshopCC2017 安装与破解（Mac）
简单说明下Adobe Photoshop CC 2017的破解方法: 1.打开dmg镜像,双击“Install”进行安装,登陆Adobe ID(没有注册一个)完成安装: 2.解压缩“Adobe Zii ...
- C# 根据部分属性来判断俩个对象是否相同
根据部分属性来判断俩个对象是否相同 代码是第一版本 可能不牢固 有问题请反馈一下 3QU 效果图: public static class CustomExpand { public static b ...
- 自动化批量管理工具salt-ssh - 运维小结
根据以往运维工作中操作经验来说,当管理上百台上千台服务器时,选择一款批量操作工具是及其有必要的.早期习惯于在ssh信任关系的前提下做for;do;done循环语句的批量操作,后来逐渐趋于使用批量工具操 ...
- 2017乌鲁木齐区域赛D题Fence Building-平面图的欧拉公式
这个题B站上面有这题很完整的分析和证明,你实在不懂,可以看看这个视频 https://www.bilibili.com/video/av19849697?share_medium=android&a ...
- Eddy's mistakes HDU
链接 [http://acm.hdu.edu.cn/showproblem.php?pid=1161] 题意 把字符串中大写字母变为小写 . 分析 主要是含有空格的字符串如何读入,用getline(c ...
- C#【结对编程作业】小学数学习题助手
一.软件成品展示 软件本体下载(包括程序及其更新日志,源码工程包,UML图,API接口文档,算法介绍文档,算式计算excel实例,浅查重程序) 链接: http://pan.baidu.com/s/1 ...
- Linux内核分析— —操作系统是如何工作的（20135213林涵锦）
mykernel实验指导(操作系统是如何工作的) 实验要求 运行并分析一个精简的操作系统内核,理解操作系统是如何工作的 使用实验楼的虚拟机打开shell cd LinuxKernel/linux-3. ...