元素选择器
//格式： 元素名 { //属性：值; } //选择当前的元素进行设置样式;
//示例： div { font-size:20px; } //元素 <div>标签选择器</div>
类选择器
//格式： .标签名 { //属性：值; } //选择当前的标签名进行设置样式;
//示例： .nav { font-size:20px; } //元素 <div class='nav'>类选择器</div>
Id选择器
//格式： #标签名 { //属性：值; } //选择当前的标签名进行设置样式;
//示例： #boot { font-size:20px; } //元素 <div id='boot'>id选择器</div>
后代选择器
//格式： 标签名1 标签名2 ... { //属性：值; } //选择当前的标签名1下所有的标签名2进行设置样式,中间用空格隔开,可以无限的往下选中(不限层级); //标签名可以是元素名,类名,id名
//示例： #boot p { font-size:20px; } //元素 <div id='boot'> <p>后代选择器</p> </div>
子代选择器
//格式： 标签名1>标签名2>... { //属性：值; } //选择当前的标签名1下所有的标签名2进行设置样式,中间用>隔开,只会选择当前直系的子元素; //标签名可以是元素名,类名,id名
//示例： #boot>p { font-size:20px; } //元素 <p>子代选择器</p> <div id='boot'> <p>子代选择器</p> </div>
交集选择器
//格式： 标签名1标签名2... { //属性：值; } //选择当前的标签名1又是标签名2的进行设置样式,中间没有任何东西隔开,只会选择是标签名1且又是标签名2的元素; //标签名可以是元素名,类名,id名
//示例：div标签且是id选择器是#boot的元素 div#boot { font-size:20px; } //元素 <div id='boot'> <p>交集选择器</p> </div>
并集选择器
//格式： 标签名1, 标签名2, ... { //属性：值; } //选择当前的标签名1和标签名2进行设置样式,中间用,隔开; //标签名可以是元素名,类名,id名
//示例： #boot, p { font-size:20px; } //元素 <p>并集选择器</p> <div id='boot'> <p>并集选择器</p> </div>
兄弟选择器
相邻兄弟选择器（css2）
//格式： 标签名1+标签名2{ //属性：值; } //选择当前的标签名2紧跟标签名1的进行设置样式,中间用+隔开; //标签名可以是元素名,类名,id名
//示例：选择紧跟 <div> 元素的首个 <p> 元素。 div+p { font-size:20px; } //元素 <div id='boot'> 兄弟抱一下 </div> <h1>添加了h1标签就不是相邻的了，因为div紧跟的标签不是p了而是h1</h1> <p相邻选择器</p>
通用兄弟选择器（css3）
//格式： 标签名1~标签名2{ //属性：值; } //选择当前的标签名2前面有标签名1的进行设置样式,中间用~隔开; //标签名可以是元素名,类名,id名
//示例：选择紧跟 <div> 元素的首个 <p> 元素。 div~p { font-size:20px; } //元素 <div id='boot'> 兄弟抱一下 </div> <h1>这里无论是否添加都会选择因为前面有div</h1> <p通用选择器</p>
序选择器
同级别不区分类型的选择器
元素名:first-child 选择同级别中的第一个元素。
元素名:last-child 选择同级别中的最后一个元素。
元素名:nth-child(n) 选择同级别中的第N元素。
元素名:nth-last-child(n) 选择同级别中的倒数第N元素。
元素名:only-child 选择父元素中唯一的元素(当前元素中有一个为当前元素名且只有一个的元素标签)。
//格式： 标签名1:first-child{ //属性：值; } //选择当前的标签名1且为同级别中的第一个元素; //标签名可以是元素名,类名,id名
//示例： p:first-child { font-size:20px; } //元素 <div id='boot'> 兄弟抱一下 </div> <h1>风雨交加</h1> <p选择器</p>
同级别同类型的选择器
元素名:first-of-type 选择同级别中同类型的第一个元素。
元素名:last-of-type 选择同级别中同类型的最后一个元素。
元素名:nth-of-type(n) 选择同级别中同类型的第N元素。
元素名:nth-last-of-type(n) 选择同级别中同类型的倒数第N元素。
元素名:only-of-type 选择父元素中唯一的元素类型的元素。
N可以为数字，英文，还有倍数：
odd 奇数（1357）
even 偶数（2468）
2n+1 n是计数器从0开始，(n是看当前有几个元素，比如当前页面有7个p标签，然后n就是0-7)这是说的是2的倍数+1的元素，
2n 2的倍数标签，n从0开始
注意点，任何数和0相乘都得0
//格式： 标签名1~标签名2{ //属性：值; } //选择当前的标签名2前面有标签名1的进行设置样式,中间用~隔开; //标签名可以是元素名,类名,id名
//示例：选择紧跟 <div> 元素的首个 <p> 元素。 div~p { font-size:20px; } //元素 <div id='boot'> 兄弟抱一下 </div> <h1>这里无论是否添加都会选择因为前面有div</h1> <p通用选择器</p>
属性选择器
元素名[属性名] 选择当前元素带有当前属性名的所有元素。 元素名[属性名=属性值] 选择当前元素带有属性和属性值的所有元素。 元素名[属性名|=属性值](CSS2不推荐) 选择当前元素以属性值开头的元素。 元素名[属性名~=属性值](CSS2不推荐) 选择元素属性中包含当前属性值的元素。 元素名[属性名^=属性值](CSS3推荐) 选择元素的属性值以属性值开头的元素。 元素名[属性名*=属性值](CSS3推荐) 选择元素属性中包含当前属性值的元素。 元素名[属性名$=属性值](CSS3推荐) 选择元素的属性值以属性值结尾的元素。 这里不推荐的原因： CSS2属性选择器有弊端，例如: //这个代码直会找到abc-www的这个img标签，因为css2属性开始选择器只会找属性值， //且开始属性值以-隔开的属性，其他都找不到，而css3可以找到所有以属性值开头的元素 img[alt|=abc]{代码} <img src='' alt='abcdfg'> //css2找不到，但css3选择器却能找到 <img src='' alt='abc-www'> 第二个属性选择器的问题： //css2只能找到当前单独存在属性值中间并且是以空格隔开的元素，而css3只要包含都能找到。 img[alt~=abc]{代码} <img src='' alt='abcdfg'> <img src='' alt='abc-www'> <img src='' alt='ddd abc www'>//css2只能找到单独存在的，但css3选择器却全能找到
//格式： { //属性：值; } //选择当前元素名且拥有属性为当前属性值的元素;
//示例： a[href]{ font-size:20px; } //元素 <a href='http://www.baidu.com'></a>
