如果不考虑兼容,css3新增了一些计算位置的选择器:
:first-of-type 选择属于其父元素的首个 <p>元素的每个 <p>元素
:last-of-type 选择属于其父元素的最后 <p>元素的每个 <p>元素。
:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p>元素。
:only-child 选择属于其父元素的唯一子元素的每个 <p>元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p>元素。
:nth-last-child(n) 同上,从最后一个子元素开始计数。
:nth-of-type(n) 选择属于其父元素第二个 <p>元素的每个 <p>元素。
:nth-last-of-type(n) 同上,但是从最后一个子元素开始计数。
举个例子,要把表格第三行第三列的字体改成红色:
table tr:nth-child(3)>td:nth-child(3) {color: red
}
css的单位有很多,常用的有:"px,%,em,rem,vw,vh"。理论上css可以使用任意的单位,但是在页面当中只能识别支持的单位类型,其他的需要转换。
电脑端最常用的当然px和百分比,也是支持得最好的单位。移动端一般要使用"rem,vw,vh"这些单位。