css样式层级问题,样式层级关系
CSS样式优先级问题(如能正确回答,有积分奖励)
设带“#”的id选择符权重为100,带“.”的类选择符权重为10,不带什么“”的选择符权重为1,;则由上至下的代码,后边写的样式权重大于等于前面写的样式时,会覆盖前面的样式。
创新互联是专业的宜黄网站建设公司,宜黄接单;提供成都网站设计、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行宜黄网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
然后按楼主的要求来分析,一共是三个样式:
#div1 td{ color:#FF0000}
#div1 .blue{color:#0000FF}
.bluecolor:#0000FF}
第一个权重为一个“#”加“” = 100+1 = 101
第二个权重为一个“#”加“.” = 100+10=110
第三个权重为一个“.”=10
则,很明显,当一二组合时,第二个可以覆盖掉第一个的样式;当一三组合时,第三个不能覆盖掉第一个样式,则两个同为红色。
如不明,再发问...
css父级的层级不对会导致deep失效吗?
会啊,层级对于css样式来说是很重要的。层级直接决定了,样式是否生效。
CSS关于层级关系的问题。。。
div class="banner"
object type="application/x-shockwave-flash" data="flash/930100.swf" width="930" height="100"
param name="allowscriptaccess" value="always"
!-- 解决 IE 6 7 8 层叠问题 --
param name="wmode" value="transparent"
param name="movie" value="flash/930100.swf" width="930" height="100"
embed src="flash/930100.swf" width="930" height="100" border="0" align="center" allowscriptaccess="always" wmode="transparent"
/object
/div
css样式如何控制div到最顶层
1、新建一个html文件,命名为test.html
2、在test.html文件内,使用css设置页面所有的div宽度为300px,高度为300px,div的位置为绝对定位。
3、在test.html文件内,创建三个div,并用文字标识,分别为底层div、中层div、最顶层div。
4、在test.html文件内,分别给三个div设置class属性为one、two、three,用于下面对类名进行样式设置。
5、在css标签内,设置类名为one的div样式,设置其背景颜色为红色,距离页面左边缘为0,距离页面上边缘为0,同时使用z-index设置其层级为1。
6、在css标签内,设置类名为two的div样式,设置其背景颜色为黄色,距离页面左边缘为50px,距离页面上边缘为50px,同时使用z-index设置其层级为2,即在类名为one的div的上面。
7、在css标签内,设置类名为three的div样式,设置其背景颜色为粉红色,距离页面左边缘为100px,距离页面上边缘为100px,同时使用z-index设置其层级为3,即在页面三个div中的最顶层。
8、在浏览器打开test.html文件,查看实现的层级效果。
网页CSS元素浮动的层次顺序问题。
层级关系的布局有两种解决方法:
一种方法是使用标签的自然顺序和嵌套顺序来形成合理的布局。
而第一种方法却不是万能的,有时候我们需要将原本位于下层的元素移到另一个元素上方,那可以使用z-index;
当你定义的CSS中有position属性值为absolute、relative或fixed,
用z-index此取值方可生效。
此属性参数值越大,则被层叠在最上面。
例子:
html
head
style
.z1,.z2,.z3{position:absolute;width:200px;height:100px;padding:5px 10px;color:#fff;text-align:right;}
.z1{z-index:1;background:#000;}
.z2{z-index:2;top:30px;left:30px;background:#C00;}
.z3{z-index:3;top:60px;left:60px;background:#999;}
/style
/head
body
div class="z1"z-index:1/div
div class="z2"z-index:2/div
div class="z3"z-index:3/div
/body
/html
上面三个CSS,将根据z-index的值决定谁在最上层!
网站栏目:css样式层级问题,样式层级关系
网址分享:http://scyanting.com/article/phecoo.html