首页 > 代码库 > 2014-7-22
2014-7-22
一、first-child与firsty-of-type
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。
IE6~IE8不支持first-of-type选择器。
二、display: none与visible: hidden
display: none会让元素失去高宽等。如果一个元素的隐藏和显示占位不影响其他元素的位置和布局，则可以使用display: none和display: block来控制它的隐藏和显示。相反，如果一个元素的隐藏和显示占位会影响其他元素的位置和布局，则需要使用visible: hidden和visibel: visible来控制它的隐藏与显示。
三、可以使用element:hover element{display: block}控制鼠标移上后子元素的显示。之前还一直傻傻的以为只能给元素绑定hover事件来控制其他元素的显示和隐藏...不过用hover直接控制样式，在IE6下是不支持除a元素以外的其他元素hover的。解决的IE6下的这个问题。有两种方法：
1、将a元素嵌套在其他元素里面，设置a元素display: block; padding: ;height: ;让a元素撑满需要hover效果的外层元素
2、利用外部插件csshover.htc，下载该插件后，在html文件的head标签中写入body { behavior:url("csshover.htc"); }即可
推荐使用第二种方法，方便简单
四、absolute定位的子容器不能用内容将其自身撑开到自适应的宽度的问题：当absolute定位的一个元素的任一级父容器被设置为float或者display: inline-block时，就会出现这个问题。解决的方法是，给该absolute定位的元素加上white-space: nowrap;样式强制不换行。引申一下，对于开发中遇到莫名其妙的换行问题，尝试一下使用white-space: nowrap;
<!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=utf-8" /> <title>absolute定位的子容器不能被撑开的测试</title> <style type="text/css"> div:after{ display: block; content: ""; clear: both; } </style></head><body> <div style="width: 960px; margin: 10px auto; "> <h1 style="background: #f4b75a;">出现absolute定位的子容器不能被撑开的问题</h1> <div style="float: right; display: inline; "> <a href="#" style="position: relative;">我的账户信息<i></i></a> <div style="position: relative;margin-top: -1px; "> <div style="position: absolute; top: 100%;right: 0;line-height: normal; background: #edebeb; "> <a style="display: block;" href="#">我的订单</a> <a style="display: block;" href="#">我的包裹</a> <a style="display: block;" href="#">我的账户</a> <a style="display: block;" href="#">我的余额</a> <a style="display: block;" href="#">我的会员中心</a> <a style="display: block;" href="#">我的现金券</a> <a style="display: block; color: red;" href="#">我的金币（新）我的金币（新）</a> </div> </div> </div> </div> <div style="width: 960px; margin: 10px auto; margin-top: 200px; "> <h1 style="background: #f4b75a;">父容器没有浮动，absolute定位的子容器能被撑开</h1> <div style="display: inline; margin-top: 200px; "> <a href="#" style="position: relative;">我的账户信息<i></i></a> <div style="position: relative;margin-top: -1px; "> <div style="position: absolute; top: 100%;left: 0;line-height: normal; background: #edebeb; "> <a style="display: block;" href="#">我的订单</a> <a style="display: block;" href="#">我的包裹</a> <a style="display: block;" href="#">我的账户</a> <a style="display: block;" href="#">我的余额</a> <a style="display: block;" href="#">我的会员中心</a> <a style="display: block;" href="#">我的现金券</a> <a style="display: block; color: red;" href="#">我的金币（新）我的金币（新）</a> </div> </div> </div> </div> <div style="width: 960px; margin: 10px auto; margin-top: 200px; "> <h1 style="background: #f4b75a;">解决absolute定位的子容器不能被撑开的问题</h1> <div style="float: right; display: inline; "> <a href="#" style="position: relative;">我的账户信息<i></i></a> <div style="position: relative;margin-top: -1px; "> <div style="position: absolute; top: 100%; right: 0;line-height: normal; background: #edebeb; white-space:nowrap; "> <a style="display: block;" href="#">我的订单</a> <a style="display: block;" href="#">我的包裹</a> <a style="display: block;" href="#">我的账户</a> <a style="display: block;" href="#">我的余额</a> <a style="display: block;" href="#">我的会员中心</a> <a style="display: block;" href="#">我的现金券</a> <a style="display: block; color: red;" href="#">我的金币（新）我的金币（新）</a> </div> </div> </div> </div></body></html>