css选择器
一、基本选择器
1. 通配选择器 「*」
1 *{margin: 0;padding: 0} //选择页面中的所有元素并设置margin和padding值为0
2 .demo *{background:#000} //选择类名为demo的元素下面的所有元素并设置背景为黑色
2.元素选择器 「Element」
1 body{background:#ccc} //选择body元素
2 ul{background:#fff} //选择列表ul元素
3.ID选择器 「#id」
html:
<div id="demo"></div>
css:
#demo{do something}
4.类选择器 「.class」
html:
<ul class="demo"></ul>
css:
.demo{do something}
ul.demo{do something} //这样只会选择有demo类名的ul元素
需要注意的是：多个页面元素可以有相同的类名，但是元素的id在页面中必须是唯一的。
5.群组选择器 「selector1，...，selectorN」
html:
<div class="section-1"></div>
<div class="section-2"></div>
<div class="section-3"></div>
css:
.section-1,.section-2,.section-3{do something} //给三个页面元素定义公用的样式
二、层次选择器
6.后代选择器「E F」
html：
<div class="parent">
<div class="child"></div>
<div class="child">
<div class="c-child">
<div class="c-c-child"></div>
</div>
</div>
</div>
css:
.parent div{do something} //会选择parent里面的所有div，不管是子元素.child还是孙元素.c-child和.c-c-child
7.子选择器「E > F」
html：
<div class="parent">
<div class="child"></div>
<div class="child">
<div class="c-child">
<div class="c-c-child"></div>
</div>
</div>
</div>
css:
.parent > div{do something} //只会选择.parent元素的直系子元素，也就是只会选择到 .child元素
8.相邻兄弟元素选择器「E + F」
html:
<div>
<div class="demo">1</div>
<div>2</div>
<div>3</div>
</div>
css:
.demo + div {do something}//会选中内容为2的div
9.通用兄弟选择器「E ~ F」
html:
<div>
<div class="demo">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
css:
.demo ~ div {do something}//会选中内容为2,3,4的div
三、伪类选择器
10.动态伪类选择器「E:link,E:visited,E:active,E:hover,E:focus」
1 E:link{do something} //选择定义了超链接但链接还未被访问过的元素
2 E:visited{do something} //选择定义了超链接并且链接已经被访问过的元素
3 E:active{do something} //选择匹配的E元素，且元素被激活，常用在锚点和按钮上
4 E:hover{do something} //选择鼠标停留的匹配的E元素
5 E:focus{do something} //选择匹配的E元素，且元素获得焦点
11.语言伪类选择器「E:lang(language)」
用来选择指定了lang属性的元素，其值为language。
html:
<html lang="en-US"></html>
css:
:lang(en-US) {do something}
有时候网页切换不同的语言版本的时候，可以通过这个选择器做一些特殊的处理。
12.状态伪类选择器「E:checked,E:enabled,E:disabled」
1 E:checked{do something} //匹配表单中被选中的单选按钮或复选按钮
2 E:enabled{do something} //匹配所有起用的表单元素
3 E:disabled{do something} //匹配所有禁用的表单元素
13.结构伪类选择器「E:first-child,E:last-child,E:root,E:nth-child(n),E:nth-last-child(n),E:nth-of-type(n),E:nth-last-of-type(n),E:first-of-type,E:last-of-type,E:only-child,E:only-of-type,E:empty」
13.1 [E:first-child]
用来选取特定元素的第一个子元素。
html:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
css:
ul > li:first-child {do something} //用来选取ul中的第一个li元素
13.2 [E:last-child]
用来选取特定元素的最后一个子元素。
html:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
css:
ul > li:last-child {do something} //用来选取ul中的最后一个li元素
14.3 [E:nth-child()],[E:nth-last-child()]
用来选取某个父元素的一个或多个特定的子元素，其中的n可以是数值(从1开始)，也可以是包含n的表达式，也可以是odd(奇数)，even(偶数)。
E:nth-last-child()选择器的使用方法于E:nth-child()是相同的，不同的是E:nth-last-child()选择的元素是从父元素的最后一个子元素开始算起。
html:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
css:
ul > li:nth-child(2n+1) {do something} //用来选取ul中的第2n+1(奇数)个li元素
13.4 [E:root]
用来匹配元素E所在的文档中的根元素，在html文档中根元素就始终是html。
13.5 [E:nth-of-type(),E:nth-last-of-type()]
E:nth-of-type()只计算父元素中指定的某种类型的子元素，当某个元素的子元素类型不只是一种时，使用nth-of-type来选择会比较有用。
E:nth-last-of-type()的用法同E:nth-of-type()相同，不同的是:nth-last-of-type()也是从父元素的最后一个子元素开始算起。
li:nth-of-type(3)的话就会标识它只会选择第三个li元素，别的元素会忽略掉，如：
html:
<ul>
<li>1</li>
<li>2</li>
<div>3</div>
<div>4</div>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
ul > li:nth-of-type(3){do something} //会选中内容为5的li元素
但是使用nth-child就会是这样：
html:
<ul>
<li>1</li>
<li>2</li>
<div>3</div>
<div>4</div>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
ul > li:nth-child(3){do something} //会选中内容为3的div元素
