CSS3学习总结

一.css3新增选择器

1.属性选择器

属性选择器的权重跟class选择器的权重一样都是10，但是属性选择器前面一般会加上标签选择器（权重1）所以加起来权重是一般比class选择器权重高

属性选择器语法

button[disabled] {cursor: default;} /*选择button标签并且有disabled属性的*/
input[type="search"] {color: tomato;} /*选择input标签并且type属性值为search的*/
div[class^="icon"] {color: red;} /*选择div标签，并且类名是以icon开头的*/
div[class$="icon"] {color: green;} /*/选择div标签，并且类名是以icon结尾的*/
div[class*="icon"] {color: blue;} /*选择div标签，并且类名中含有icon就可以*/

2结构伪类选择器

结构伪类选择器的权重是10，但是父标签的权重是1，子标签的权重是1，加一起权重就是12了

语法	注释
parentsEl childEl：first-child	父标签中正序第一个出现子标签 例子：ul li: first-child
parentsEl childEl：last-child	父标签中正序最后一个出现子标签 例子：ul li: last-child
parentsEl childEl：nth-child(n)	父标签中正序第n个出现子标签 这里的n可以是数字、关键字、公式。（even）表示选择偶数行,（odd）表示选择基数行,(2n)  选择偶数行，（2n+1）选择基数行，（n+2）排除第一个，就是从第二个开始，（-n+5）只选前5个（代码执行顺序是先看第个个，再看子标签，标签不对就不选了）
parentsEl childEl：nth-last-child（）	倒序选择子标签
parentsEl childEl：nth-of-type（）	这种才是只选择特定子标签，类似于3，但是代码执行顺序是先查对应的子标签，再查是第几个。如果有指定的子标签，应用nth-of-type

3.伪元素选择器

伪元素是用css的方式，模拟创建一个行内元素，但不是真正意义上的元素

伪元素必须要有content属性

不管是写一个冒号还是两个，最后都会被浏览器解析为两个冒号

:before :after  ::before   ::after

二.CSS3的transform属性

transform属性允许我们对元素进行平移、旋转、缩放、倾斜

1.translate: 就是用来平移元素的，是基于元素自己位置平移的、平移后的元素不会脱离文档流、不会造成页面重排。

三.offsetLeft是基于非static定位的父元素计算的