19.CSS3选择符

属性选择器

 属性选择符：
        选择符的目的：选择标签，对标签做css样式渲染
        通过html的属性，对html标签做选择。

        1：选择符[属性名]{ css样式 }
                说明：只要带有当前属性则匹配成功

        2:选择符[属性="属性值"]{ css样式 }
                说明：指定属性名也必须指定属性值，则匹配成功。

        3:选择符[属性~="属性值"]{ css样式 }
                说明：当前属性值是一个以空格隔开的“词列表”，只要包含当前指定的属性值则匹配成功。

        4:选择符[属性^="字符"]{ css样式 }
                说明：当前属性值是以当前字符开头的就会匹配成功。

        5：选择符[属性$="字符"]{ css样式 }
                说明：当前属性值是以当前字符结尾的就会匹配成功。

        6:选择符[属性*="字符"]{ css样式 }
                说明：属性值只要包含当前指定的字符，则匹配成功。


        7:选择符[属性|="属性值"]{ css样式 }
                说明：
                    a: 如果属性值是以   属性值-  开头  的则匹配成功
                    b：如果属性值仅是 当前指定的 属性值 则匹配成功

结构性伪类选择器

元素:first-child{ css样式 }       选择当前“ 子集 ”第一个
元素:last-child{ css样式 }        选择当前“ 子集 ”最后一个
元素:nth-child(第几个){ css样式 }  选择当前“ 子集 ”第几个
元素:nth-last-child(){ css样式 }   选择当前“ 子集 ”倒数第几个
元素：only-child{ css样式 }       当前子集只有一个元素则被选择

元素:first-of-type{ css样式 }       选择当前“ 子集 ”第一个
元素:last-of-type{ css样式 }        选择当前“ 子集 ”最后一个
元素:nth-of-type(第几个){ css样式 }  选择当前“ 子集 ”第几个
元素:nth-last-of-type(){ css样式 }   选择当前“ 子集 ”倒数第几个
元素：only-of-type{ css样式 }       当前子集只有一个元素则被选择

注：
    如果子集都是同类标签用的 child 
    如果子集不是同类标签用的 of-type
        
 结构伪类：
        :root{ css样式 }  选择根标签 -> html
        选择符:empty{ css样式 }  当前元素没有任何内容才会被选择

目标伪类

目标伪类选择器
E:target	选择匹配E的所有元素，且匹配元素被相关URL指向

层级选择器

**E>F**
子选择器
	选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
**E+F**
相邻兄弟选择器
	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
**E~F**
通用选择器
	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

动态伪类选择器

	E**:link**
 		链接伪类选择器  
 		选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
 	E**:visited**  
 		链接伪类选择器
 		选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
 	E**:active**
 		用户行为选择器
 		选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
 	E:**hover**
 		用户行为选择器
 		选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
 	E:**focus**
 		用户行为选择器
 		选择匹配的E元素，而且匹配元素获取焦点