css3 选择器

css3增加了很多内容，其中增加的选择器就分为属性选择器、结构性伪类选择器、层级选择器。
一、属性选择器：
1、选择符[属性名]{ } 只要带有当前属性名的都会被选中。
2、选择符[属性名=”属性值”] 不仅指定属性名，还指定了属性值，只有都符合时才会被选中。
3、选择器[属性名~=”属性值”] 属性值为一个词列表，只要有当前属性名就可以选中。
4、选择器[属性名^=”属性值”] 属性值必须以当前属性值为开头才能选中。
5、选择器[属性名$=”属性值”] 属性值必须以当前属性值为结尾才能被选中。
6、选择器[属性名*=”属性值”] 属性值只要含有指定的字符就会被选中，不要求属性值完全一致。
7、选择器[属性名|=”属性值”] 属性值是当前指定的属性值或者是以 - 开头的属性值被选中。
应用大体一致，下面用第七个举例，如下图：


结果为：

二、结构性伪类选择器：
如果子集标签一致时
1、选择符：first-child{ } 选中第一个元素
2、选择符：last-child{ } 选中最后一个标签
3、选择符：nth-child ( val){ } val的值为数字，意为选择第几个元素。
拓展：偶数为2n(或even)、奇数为2n+1( 或odd),可以实现隔行换色效果。
4、选择符：only-child{ } 子集只有一个元素时被选中。
当子集标签不一致时，和上述大体一致，但是需要用of-type，先确定类型，剔除其他后再选择。
1、选择符：first-of-type{ }
2、选择符：last-of-type{ }
3、选择符：nth-of-type ( val){ }
4、选择符：only-of-type{ }
举例如下：


结果为：

三、层级选择器：
1、父元素>子元素{ } 只能选择父元素最近的一层子元素。
2、兄弟元素+兄弟元素{ } 通过当前元素选择离他最近的兄弟元素。
3、兄弟元素~兄弟元素{ } 通过当前元素选择下面所有的兄弟元素。
举例如下：


结果为：

包含选择符也属于层级选择符
语法：父元素选择器 子元素选择器{ 子元素写样式 }

拓展：
:root 选中的是根元素html
选择符: empty 当当前元素没有内容时被选中。