CSS选择器
CSS选择器决定了样式规则适用于哪些
基本选择器
元素选择器
文档的元素就是最基本的选择器。如果设置HTML的样式，选择器通常将某个HTML元素，比如 p、h1、em、a，甚至可以是html本身：
html{color:black;}
h1{color:red;}
p{color:blue;}
所有与这些标记名匹配的元素，都将应用声明块中的规则。
类选择器
类选择器允许以一种独立的文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。
为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值：
html： <h1 class="F47"> css : .F47
所有class属性为指定类名的元素，都将应用声明块中的规则。
ID选择器
id选择器可以为标有id的HTML元素指定的样式。
id选择器以 # 来定义。
html：<p id="red">这个段落是红色</p> css：#red{color:red;}
HTML代码中，id属性为 red 的 p 元素内容在页面显示为红色。
属性id为指定值的元素，将应用声明块中的规则
在同一个HTML文档中，元素的id值必须唯一。
通配符选择器
在CSS中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果。
*{color:red;}
并集选择器
格式: 选择器1,选择器2,...{ 属性:值; } 注意点: (1),选择器之间利用,连接 (2),选择器可以是标签名称,也可以是id、class名称
h1,h2,h3{color:red;}
层次选择器
子级选择器
只能选择作为某元素子元素的元素。
格式：父级元素名称 + “>” +子级元素名称 + {声明块}
如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子级选择器。
例如，如果选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1> strong{color:red;}
后代选择器
后代选择器又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
如果只对 h1 元素中的 p 元素应用样式，可以这样写：
h1 p{color:red;}
兄弟选择器
只选中同级的标签 1,相邻兄弟兄弟选择 格式: 选择器1+选择器2{ 声明块}
注意点: (1),相邻选择器必须用+链接 (2),相邻选择器只能选中紧跟后边的那个标签,不能选中被隔开的标签
span p{color:red;}
通用选择器
只选中同级的标签，格式：选择器1+选择器2{ 声明块}
注意：选择A元素后的B元素，且位于A元素的所有B元素
span~p{color:red;}
伪类选择器
动态伪类选择器
未访问：例： a:link{color:red;} 鼠标悬停：a:hover{color:blue;} 鼠标点击：a active{color:green;} 鼠标点击后：a：visited{color:yellow;} 顺序： link—visited—hover—active （link和visited属于静态伪类选择器，只应用于超链接（a） hover和active属于动态伪类选择器，不仅限于超链接）
焦点
焦点（多用于输入框，链接，可以用到非a类标签 a：focus
语言伪类选择器
格式：元素名称+":lang"+(en/fr/cn)
结构伪类选择器
格式：元素名称{元素内容} 例：p{新年好}*10
格式： 元素名称+"：nth-child(n)"{声明块} 例：p:nth-child(4){color:red} 表示选中HTML中的第四个p，文字颜色为红色
格式： 元素名称+"：first-child"{声明块} 例：p:first-child{color:red} 表示选中HTML中的第一个p，文字颜色为红色
格式： 元素名称+"：last-child"{声明块} 例：p:last-child{color:red} 表示选中HTML中的倒数第一个p（最后一个p），文字颜色为红色
格式： 元素名称+"：nth-child(even)"{声明块} 例：p:nth-child(even){color:red} 表示选中HTML中的偶数项，文字颜色为红色
格式： 元素名称+"：nth-child(odd)"{声明块} 例：p:nth-child(odd){color:red} 表示选中HTML中奇数项，文字颜色为红色
格式： 元素名称+"：nth-last-child(n)"{声明块} 例：p:nth-last-child(n){color:red} 表示选中HTML中的倒数第N个p，文字颜色为红色
格式： 元素名称+"：nth-of-type(n)"{声明块} 例：p:nth-of-type(n){color:red} 表示找类型为p的第N个元素，文字颜色为红色
格式： 元素名称+"：first-of-type"{声明块} 例：p:first-of-type{color:red} 表示找类型为p的第1个元素，文字颜色为红色
格式： 元素名称+"：last-of-type"{声明块} 例：p:last-of-type{color:red} 表示找类型为p的最后一个元素，文字颜色为红色
格式： 元素名称+"：only-child"{声明块} 例：p:only-child{color:red} 表示只有一个p元素时样式才生效
格式： 元素名称+"：empty"+{声明块} 例：p:empty{color:red} 表示p元素没有嵌套时样式才生效
格式： 元素名称+"：only-of-type"{声明块} 例：p:onlyt-of-type{color:red} 表示只有一个p元素时样式才生效
否定伪类选择器
格式： 元素名+":after" 例：p+":after"或"::after" 表示在p元素后添加内容
格式： 元素名+":before" 例：p+":before"或"::before" 表示在p元素前添加内容
格式： 元素名+"::first-letter" 例：p+"::first-letter" 表示p标签中的第一个字进行样式改变
格式： 元素名+"::first-line" 例：p+"::first-line" 表示p标签中的第一行，进行样式改变
伪元素选择器
CSS 中的伪元素选择器:before 和:after，按照其官方的说法，是在被选中的元素的内容之前插入内容。根据最近几次的实践，我觉得所谓被选中的元素，需要是能包含其他元素的元素，比如<label>,<p>,<div>，等，他们之中可以插入其他的元素，比如<p><input type="text" /></p>,如果用p:before{content:"666";}，就会在<input/>元素前面插入“666”，相反，其他不能包含元素的元素则不能使用此功能，比如<input>,css:input:before{content:"666";}则没有用。
