CSS中选择器优先级顺序实战讲解
我是标记选择器 div
|
<div id=”article”>itdriver.cn</div> |
<div id=”article” style=””>itdriver.cn</div> |
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
|
当我们运行示例的时候,会发现div的背景依然是黄色的,但是我们字体大小是按着#article来设置的(因为行内样式没有设置字体大小)。这就说明: 行内样式 > ID选择器应用的样式。
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
/*给所有指定container为class的标签应用样式*/
.container{
font-size: 0.5em;
border:1px solid red;
}
|
/*给id为article的标签应用样式 */
#article{
font-size: 0.8em;
float:right;
}
/*给所有指定container为class的标签应用样式*/
.container{
font-size: 0.5em;
border:1px solid red;
}
div{
font-size:1em;
border:2px solid black;
color:green;
}
|
我们会发现,只有字体的颜色发生了变化,其他的样式还是之前的样式,这就说明标记选择器没有覆盖前面类选择器,ID选择器以及行内已定义的样式。这也就证明了 : 行内样式 >ID选择器 > 类选择器 > 标记选择器.
CSS中选择器优先级顺序实战讲解的更多相关文章
- CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...
- CSS中选择器优先级与!important权重使用
CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...
- 【CSS】选择器优先级
CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...
- 关于css中选择器的小归纳(一)
关于css中选择器的小归纳 一.基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul),类选择器(我们在HTML标签里面为其添加的clas ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- 【CSS系列-选择器优先级总结】
转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性 CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- css中选择器
css中常用的选择器有: 1.元素选择器:h1{} 如<h1></h1> 2.类选择器:.test{}或者h1.test{} 如<h1 class="test ...
- xaml与CSS中的Margin顺序不同
XAML中 Margin:左 上 右 下 CSS中 Margin:上 右 下 左
随机推荐
- cocos2d-x3.x屏蔽遮罩层屏蔽触摸button
cocos2d-x3.x触摸方法改变后,.屏蔽掉的层实际上触摸事件的非常easy,首先touchbegan一定要回true,第二,该事件被设定为听吞没触摸true.最近登录触摸水平必须低于0,现在,我 ...
- hdu 3081 hdu 3277 hdu 3416 Marriage Match II III IV //灵活运用最大流量
3081 意甲冠军: n女生选择不吵架,他甚至男孩边(他的朋友也算.并为您收集过程).2二分图,一些副作用,有几个追求完美搭配(每场比赛没有重复的每一个点的比赛) 后.每次增广一单位,(一次完美匹配) ...
- SGU 548 Dragons and Princesses
意甲冠军: n个月格儿 所有的格龙或公主的儿子 从勇士1走n 不杀 杀死有钱拿 路过公主 假设之前杀龙的数量满足公主要求就会停止行走 问 勇士想多拿钱 可是必需要满足n格子的公主 ...
- COM-TEAM
- vs2013 ADO联系SQL server2012数据库
平时,给定ADO例如使用以下过程数据源中的数据的数据库应用程序 (1) 创建一个Connection 物.定义的连接字符串信息.它包含了数据源名称.用户ID.密码.连接超时 . 默认数据库的位置和光标 ...
- twitter接口开发
前一阵子研究了下twitter接口,发现网上的资料不是很多.遂花了些心血,终于有所收获~ 现在有时间赶紧整理出来便于自己以后查阅,也想帮助有困难的同学们.废话不多说,现在就以最简洁的方式开始了.注意: ...
- (大数据工程师学习路径)第三步 Git Community Book----Git基本用法(上)
一.git的初始化 1.Git 配置 使用Git的第一件事就是设置你的名字和email,这些就是你在提交commit时的签名. $ git config --global user.name &quo ...
- iOS:删除小程序
//Applet的批次从父视图中移除 NSArray *subViews = [_scrollView subviews]; if([subViews count] != 0) { [subViews ...
- Android ADT Bundle(Eclipse with ADT) ADT R23
ADT Bundle Platform Package Size MD5 Checksum Windows 32-bit adt-bundle-windows-x86-20140624.zip 377 ...
- .NET中使用Redis(二)
很久以前写了一篇文章 .NET中使用Redis 介绍了如何安装Redis服务端,以及如何在.NET中调用Redis读取数据.本文简单介绍如何设计NoSQL数据库,以及如何使用Redis来存储对象. 和 ...