CSS3 新添选择器

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

属性选择器

属性选择器可以元素特定属性来进行选择，这样就可以不借助于类选择器或id选择器

选择符	简述
E[att]	选择具有att属性的E元素
E[att="val"]orE[att=val]	选择具有att属性且属性值为val的E元素
E[att^{="val"]orE[att}=val]	选择具有att属性且属性值以val开头的E元素
E[att$="val"]orE[att$=val]	选择具有att属性且属性值以val结尾的E元素
E[att="val"]orE[att=val]	选择具有att属性且属性值种含有val的E元素

/*选取具有class属性的div*/

div[class]{

    ...

}

/*选取具有class属性且class=icon的div*/

div[class="icon"]{

    ...

}

/*选取具有class属性且class以icon开头的div 例如icon1、icon2...*/

div[class^="icon"]{

    ...

}

/*选取具有class属性且class以icon结尾的div 例如ficon、picon...*/

div[class$="icon"]{

    ...

}

/*选取具有class属性且class含有icon的div 例如 h-icon-1、icon1、ficon...*/

div[class*="icon"]{

    ...

}

属性选择器、类选择器、伪类选择器权重都是10

结构伪类选择器

结构伪类选择器可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

选择器	简述
E:first-child	选择父元素的第一个子元素E，相当于E:nth-child(1)
E:last-child	选择父元素的倒数第一个子元素E，相当E:nth-last-child(1)
E:nth-child(n)	选择父元素的第n个子元素，n从1开始计算
E:nth-last-child(n)	选择父元素的倒数第n个子元素，n从1开始计算
E:first-of-type	选择父元素下同种标签的第一个元素，相当于E:nth-of-type(1)
E:last-of-type	选择父元素下同种标签的倒数第一个元素，相当于E:nth-last-of-type(1)
E:nth-of-type(n)	与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素

E:nth-child(n)会将所有兄弟盒子排序再检查类型是否匹配，而E:nth-of-type(n)会先选出所有类型匹配的盒子然后再排序。

注意，例如li:first-child表示选择父元素下的第一个子元素li，而不是选择li的第一个子元素！ul li:first-child表示选择ul下的li且li为ul第一个子元素。

对于E:nth-child(n) 其中n既可以是数字，也可以是关键字(even | old)，也可以是公式，若n为公式，则从0开始计算且变量必须为n，常见公式如下

公式	取值
2n	2,4,....
2n+1	1,3,5,...
5n	5,10,15,...
n+5	选取第5个元素到最后一个元素
-n+5	选取前5个元素

ul li:nth-child(3n+1){

    background-color:yellow;

}

ul li:nth-child(3n+2){

    background-color:green;

}

ul li:nth-child(3n+3){

    background-color:pink;

}

ul li:first-child{

    background-color:white;

}

ul li:last-child{

    background-color:black;

}

...

<body>

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

实现效果

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签，而不需要HTML标签，从而简化HTML结构。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

before和after创建一个新元素，但是属于行内元素

新创建的这个元素在文档树中找不到，故称为伪元素

before和after必须有content属性

before在父元素内容的前面插入元素，after在父元素内容的后面插入元素

伪元素选择器和标签选择器一样权重为1

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

可以利用before和after清除浮动



.clearfix:before,

.clearfix:after {

    content: " ";

    display: table;

}

.clearfix:after {

    clear: both;

}

.clearfix {

    *zoom: 1;

}