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样式继承和层叠

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

关于CSS样式的层叠顺序

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

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

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器...

css样式冲突问题练习例子

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">    adm...

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

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

数字页码的css样式问题

今天写了一个简单的用户控件的分页

css样式float造成的浮动“塌陷”问题的解决办法

什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级元素,而不...

各浏览器CSS样式兼容性问题的一些解决方法

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今...
  • AEYAR
  • AEYAR
  • 2013-08-17 09:42
  • 218

web-inf文件夹下的外联css样式路径问题

今天练习web项目时就把以前放在webContent文件夹下的jsp放到了web-INF文件夹下(注:web-INF文件夹里的内容不能被浏览器直接访问),这时,我产生了这样的问题:如果我在Login....
  • PZBZPL
  • PZBZPL
  • 2015-10-15 19:05
  • 2576
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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