CSS3有兼容性问题,要IE9+才能使用
新增选择器:
a.属性选择器:可以根据元素特定的属性来选择元素
注意:类、伪类、属性选择器的权重伪10.
b.结构伪类选择器
E:nth-child(n)扩展
注意:E e : nth-child(x)与E e:nth-of-type的用法:
E e : nth-child(x)的选择过程是先找到E标签的第x个子标签,再判断第x个子标签是不是e标签,若是,则选择,若不是则不选择。
例:
section li: nth-child(1) {
color: red;
}
<section>
<li>1 </li>
<li>2 </li>
<li>3 </li>
/*结果是1变成红色*/
section div :nth-child(1){
color: red;
}
<section>
<p>1</p>
<div>2</div>
<div>3</div>
/*没有标签会变色*/
E e :nth-of-type(x)则是先将E中所有的e标签都选择出来并按顺序排列,然后再找出第x个e标签改变样式
c.伪元素选择:利用CSS创建新的标签元素,而不需要HTML标签,从而简化HTML结构
写法及注意:
伪元素清除浮动法原理解释: