CSS样式中的层叠问题

原创 2016年05月31日 17:55:17

当一个元素应用到两个不同的规则样式的时候,会穿样式层叠的问题,不同的样式规则会实加在该元素上,相同的规则则会出现层叠,该元素会采用就近的样式来进行显示

如:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#demo{
	color:#F00;
	font-size:24px;
}
p{
	color:#fff;
	background-color:#096;
}

span{
	color:#000;
	background-color:#066;
}
span{
	color:#F00;
	background-color:#09C;
}
</style>
</head>

<body>
<p id="demo">This is a test</p><!--样式权值问题,ID属性权值高于元素属性权值 -->
<span>how are you</span><!--样式层叠问题 -->
</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

深入解析CSS样式层叠权重值

读到《重新认识CSS的权重》这篇,鬼哥在文章最后给出了便于记忆的顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”。那么这...

CSS样式继承和层叠

一:基本选择器 标签选择:根据页面当中标签名字进行选择,直接把样式应用到指定的标签上。 特点:1.标签选择器会对当年页面当中所有的指定标签进行选择; 2.标签选择器对代码的当...

深入解析CSS样式层叠权重值

读到《重新认识CSS的权重》这篇,鬼哥在文章最后给出了便于记忆的顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”。那么这个顺...

关于CSS样式的层叠顺序

CSS支持给同一元素多次设置相同的规则,这就是所谓竞争规则,浏览器会使用层叠顺序来确定一组竞争规则中生效的规则。例如,浏览器给每个元素设置默认规则,当我们给一个元素设置规则时,它会与默认规则竞争,但由...

CSS样式----CSS的继承性和层叠性(图文详解)

本文最初发表于博客园,并在GitHub上持续更新。以下是正文。 CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个...

CSS样式覆盖规则(层叠样式)

大家都知道CSS的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义。其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值,...

[CSS]层叠样式表CSS的基本语法和继承问题

CSS (Cascading Style Sheets)语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 selector {declaration1; declaration...

css样式中的class,style与id的优先级问题

在写css样式的时候我们要注意的有顺序问题,更重要的时候style,class与id之间的优先级问题,在页面初次完工未经改变,或者页面复杂程度很小的时候,搞不清楚这三者之间的优先级问题,似乎并没有什么...

CSS样式 强制不换行 checkbox换行问题

CSS样式强制不换行  div{  white-space:nowrap;  }  自动换行  div{   word-wrap: break-word;   word-break: normal; ...

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS样式中的层叠问题
举报原因:
原因补充:

(最多只允许输入30个字)