第十一章 - CSS3新特性

CSS3新增了选择器，可以更加便捷，更加自由的选择目标元素

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

1. 属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性且以val开头的E元素
E[att$="val"]	匹配具有att属性且以val结尾的E元素
E[att*="val"]	匹配具有att属性且值中含有val的E元素

[注]

类选择器，属性选择器，伪类选择器权重为10

2. 结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素常用根据父级选择里面的子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配度元素中的第n个子元素
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型的第n个

[注]

1. nth-child(n)选择某个父元素的一个或多个特定的子元素

• n可以是数字，关键字和公式
• n如果是数字，就是选择第n个子元素，里面的数字从1开始
• n可以是关键字，even是偶数，odd是奇数
• n可以是公式，常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素个数会被忽略)

公式	取值
2n	偶数(从2开始)
2n+1	奇数(从1开始)
5n	5的倍数(5 10 15 20 25...)
n+5	从第5个开始(5,6,,7,8,9...)
-n+5	前5个(1,2,3,4,5)

2. nth-child和nth-of-type的区别

• nth-child会把所有盒子元素排列序号，如果存在，就显示样式，如果不存在，就不显示样式

[举例来说]

```css
section div:nth-child(1){
    color: pink;
}
``` 
```html
<section>
<p>我是段落</p>
<div>我是盒子1</div>
<div>我是盒子2</div>
</section>
```

执行上面的代码后，不会显示颜色