一些零星的HTML,CSS,JS知识

IE中的CSS hack

　　比如一道题：用CSS分别定义IE6、7、8的width属性，使其在IE6下的值为10px，IE7为20px，IE8为30px？

//注意顺序不可颠倒，因为css从上往下解析，后面属性优先级略高于前面（同级的时候）
width:30px\9;	//IE8
*width:20px;	//IE7
_width:10px;	//IE6

CSS解析方式

　　从上往下，同选择器从右往左解析

　　至于为什么从右往左解析可以参考：为什么CSS选择器是从右往左解析

CSS的优先级

　　一般来讲优先级id>class>标签

　　最近遇到一个问题，就是：

#head p{
	background-color:white;
}
.change{
	background-color:red;
}

<div id="head">
	<p class="change">id优先级比.change高啊，所以我的背景是白色</p>
</div>

　　但是这样把类前面也加上#head p就可以提高优先级了

#head p{
	background-color:white;
}
#head p.change{
	background-color:red;
}

<div id="head">
	<p class="change">现在的.change的优先级最高了，背景就是红色了</p>
</div>

li标签中的a标签改变字体颜色color需要注意的地方

　　最近遇到了想鼠标移到li上，但里面的a字体变色不成功的问题。查了一下因为默认就有样式，所以不会继承父级的color等样式，这时候就需要显式让a继承li的color才行，即：

li{
	color: #fff;
}
li>a{
	color: inherit;
}

CSS想实现一个元素发生变动，改变另外元素的样式

　　原先我一直以为CSS只能改变自身元素的样式，如果想自身变动又想要别的元素变动，必须借助JS才行，但发现并不是这样。

HTML:

<div id="box"></div>
<p>就会发现你可以hover第一个层的时候，改变第二个层的样式。</p>
<div></div>

CSS:

div{
	width: 100px;
	height: 100px;
	background: red;
	border: 3px double #000;
}
#box:hover ~ div{
	background: blue;
}

结构伪类选择器:nth-child(n)需要注意的地方

　　:nth-child选择的是某父元素的子元素，这个子元素并没有指定确切的类型，必须同时满足两个条件时方能有效果：

　　1.是子元素
　　2.该子元素刚好处在n那个位置

　　但有时候经常会出现问题，比如在body下加