CSS3选择器的应用

CSS选择器
在CSS中，有三种最基本的选择器，分别是标签选择器、类选择器和ID选择器。
1.标签选择器：h1,h2…h6,p,img等CSS标签选择器就是来声明这些标签的
2.类选择器：类选择器的名称可以由用户自定义，必须符合CSS规范，属性和值跟标签选择器一样。
语法结构为：

3.ID选择器：ID选择器的使用方法与类选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，
因此它的针对性更强
三种基本选择器的优先级：ID选择器>class类选择器>标签选择器。

CSS3的高级选择器
1.层次选择器 2.结构为类选择器 3.属性选择器
1.层次选择器：通过HTML的文档对象模型元素间的层次来选择元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟等几种关系，通过他们之间的关系可以快速选定 需要的元素。
E F 后代选择器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
2.结构伪类选择器：伪类可以将一段并不存在的HTML当做独立的元素来定位，或者是找到无法使用的其他简单选择器就能定位到切实存在的元素上。这种选择器可以根据元素 在文档树中的某些特性定位到他们。
所有结构伪类都是基于HTML文档树的，也称为文档对象模型，文档树是HTML页面的层级结构，它由元素、属性和文本组成，他们都是一个节点。
E:first-child作为父元素的第一个子元素的元素E
E:last-child作为父元素的最后一个元素的元素E
E F:nth-child(n)选择父级元素E的第n个元素F（n可以使1、2、3），关键字为even、odd
E:first-of-type选择父元素内具有指定类型的第一个E元素
E:last-of-type选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)选择父元素内具有指定类型的第n个F素
3.属性选择器：在HTML中，可以给元素设置各种各样的属性，入ID、class、title、href等。通过各种各样的属性可以选择到元素并为其设置样式，这是非常方便的
E[attr] 选择匹配具有attr的E元素
E[attr=val]选择匹配具有attr的E元素，并且属性值为val（其中val区分大小写）
E[attr^=val]选择匹配元素E，且E元素定义了属性val，其属性值是以val开头的任意字符串
E[att$=val]选择匹配元素E，且E元素定义了属性attr，其属性值事宜val结尾的任意字符串
E[attr*=val]选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配