CSS选择器

1、基本选择器

　　1、元素选择器

　　2、ID选择器

　　3、类选择器

　　4、通配符选择器

　　5、并集选择器

2、层次选择器

　　1、子集选择器

　　　　格式：父级元素名称 +">"子级元素名称+{声明块}

　　　　例子：div>span{color:red}

　　2、后代选择器

　　　　格式：父级元素名称 +"空格"后代集元素名称+{声明块}

　　　　例子：div span{color:red}

　　3、兄弟选择器

　　　　格式：同级元素名称A +"+"同级元素名称B+{声明块}

　　　　例子：span+ p{color:red}

　　　　注：选择A元素后的B元素，AB之间不许有其他元素

　　4、通用选择器

　　　　格式：同级元素名称A +"~"同级元素名称B+{声明块}

　　　　例子：span~ p{color:red}

　　　　注：选择A元素后的B元素，且位于A元素后的所有元素

3、伪类选择器

　　1、未访问（效果）  a:link{声明块}

　　2、鼠标悬停/访问时（效果）  a:hover{声明块}

　　3、鼠标点击      a:active{声明块}

　　4、访问后         a:visited{声明块}

　　5、焦点（多用于输入框，链接）  a:fous{声明块}

　　6、语言类选择器

　　7、结构伪类选择器

　　8、否定伪类选择器

4、伪元素选择器

　　1、格式：元素名称+"after"

　　　　例子：p+"::after"或":after"

　　　　表示p元素后添加内容

　　2、格式：元素名称+"before"

　　　　例子：p+"::before"或":before"

　　　　表示p元素前添加内容

　　3、格式：元素名称+"::first-letter"

　　　　例子：p+"::::first-letter"

　　　　表示p标签中第一个字进行样式改变

　　4、格式：元素名称+"first-line"

　　　　例子：p+"::first-line"

　　　　表示p标签中第一行进行样式改变