CSS3新特性

新增三大特性

属性选择器，结构伪类选择器，伪元素选择器。

注意！！类选择器，伪类选择器，属性选择器权值都为10，伪元素选择器权重为1。

1.属性选择器（中括号[]）

选择符	解释
标签[属性]，如input[type]	选中input标签中的所有type属性的输入框
标签[属性=“”]，如input[type=password]	选中input中type属性且值为password的输入框
相同开头，如div[class^=demo]	如有类demo1,demo2...都要设置相同的样式，则通过class=^demo选中盒子，^是开头的意思
相同结尾，如section[class$=data]	如有类1-data,2-data...都要设置相同的样式，则通过class=$data选中盒子，$是结束的意思
只要含有，如div[class*=abc]	只要类里面含有abc,则就被选中

2.结构伪类选择器（单冒号:）

就拿ul中有n个li 来举例子

选择符	解释
ul li: first-child 或 ul li:first-of-type	匹配父元素中的第一个孩子li
ul li:last-child 或 ul li:last-of-type	匹配父元素中的最后一个孩子li
ul li: first-child(n) 或 ul li:first-of-type(n) 括号里还可以是even(偶数),odd(奇数) 也可以是公式:n,2n,5n,2n+1,n+5(从第五个孩子开始)，-n+5(将前5个选出来)	括号里如果是具体的单个数字，匹配父元素中第n个孩子。 当括号里是n,每次会自加1，第0个和超出的部分忽略掉，将ul中的所有li选中。

二者区别：

        如 section div:nth-child(1),先看括号里，再匹配。如果第一个孩子不是div,则匹配不上都选不选。

        如section div:nth-of-type(1),先看div再看括号里是第几个div。

3.伪元素选择器（双冒号::）

选择符	解释
::before	在父元素里面的前面
::after	在父元素里面的后面
二者里面的content必须要有，且是行内元素盒子