class和id
区别
- id是唯一的而class不是，id一个页面只可以使用一次；class可以多次引用，如果从头到尾浏览源代码你会发现只有一个id="header",但是有多个class="entry"。
- 属性的优先级问题。id的优先级要高于class。
使用技巧
- 子级名字中包含父命名中的部分为开头。这样方便在编写css中明确层次关系。
- class中的子级最好不用id.
- class的命名最好用大小写合用。
- id具有唯一性，并且最好在外围使用（id多用于唯一特值得dom元素上例如：页面上唯一的头部、正文、和底部这些大的样式；表单页面唯一的上传元素），而class具有可重复性，并且尽量在结构内部使用（多用于指一类dom上，例如：所有的按钮都有同样的box-shadow；让这几个div的宽度相等；具体的细节，比如具体的一个菜单，一行文字），让所有的class都成为id的子级或孙级。
常见的选择器
- 基础选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
基础选择器
| 选择器 | 含义 |
|---|---|
| * | 通用选择器，匹配页面任何元素 |
| #id | id选择器，匹配特定的id元素 |
| .class | 类选择器，匹配class包含（不是等于）特定类的元素 |
| element | 标签选择器 |
组合选择器
E、F代表基础选择器
| 选择器 | 含义 |
|---|---|
| E，F | 同时选择两个基础选择器 |
| E F | 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素）元素F |
| E>F | 子元素选择器，匹配E元素的所有直接子元素 |
| E+F | 直接相邻选择器，匹配E元素之后的相邻的同级元素F |
| E~F | 普通相邻选择器，匹配E元素之后的同级元素F |
| .class1.class2 | 同时拥有两个特性的元素例如：<span class="p2">span</span>和<h2 class="p2">h2</h2>选择器h2下的p2则应是h2.p2；对于<h2 class="p2 active">p2</h2>则是.p2.active |
| element#id | 不常用。例如<div id="ct"></div>写成div#ct |
属性选择器（用的不多）
| 选择器 | 含义 |
|---|---|
| E[attr=value] | 例如：<input type="text">和<input type="password">则input[]type=password{}
|
伪类选择器（代表一个元素的另一种状态）
| 选择器 | 含义 |
|---|---|
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已经被点击的链接 |
| E:active | 匹配鼠标已经被按下，还没有释放的元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
对于E:nth-child和E:nth-of-type用一个例子来说明
<div>
<h1 class="child">h1</h1>
<h2 class="child">h2</h2>
<div class="ct">
<h1 class="child">ct-h1</h1>
</div>
<h2 class="child">h2</h2>
</div>
E:nth-child匹配父元素的第n个子元素。例如：
.child:first-child{color:red;}则h1和ct-h1变红。
E:nth-of-type匹配.child对应的父元素中，同种标签的第一个。
.child:first-of-type{background:blue;}则h1，h2，ct-h1变蓝。
伪元素选择器
E:before和E:after两个伪元素必须有content表示在E元素之前插入生成的内容。例如：
.wrap:before{
content:'aaa'
}
在元素E内部作为第一个子元素生成一个元素，内容是aaa。
选择器的优先级
含义
如果多条规则作用于同一元素上，且定义的相同属性的不同值。比如：
<p id="text">text</p>
css中#text{color:red;}
p{color:blue}。则会涉及到优先级的问题。
优先级
- ！important会覆盖页面内任何位置定义的元素样式，在属性后面使用
.child:first-child{color:red !important;} - 作为style属性，写在元素标签上的内联样式。
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景
行内样式-----a
id选择器------b
类、属性选择器和伪类选择器-------c
标签选择器、伪元素-------------------d
原则：先比较a，然后依次比较b,c,d。
| 选择器 | 优先级 |
|---|---|
| *{} | a=0,b=0,c=0,d=0 |
| li{} | a=0,b=0,c=0,d=1 |
| li:first-line{} | a=0,b=0,c=0,d=2 |
| ul li{} | a=0,b=0,c=0,d=2 |
| ul ol+li{} | a=0,b=0,c=0,d=3 |
| h1+*[rel=up] | a=0,b=0,c=1,d=1 |
| ul ol li.red | a=0,b=0,c=1,d=3 |
| li.red.level | a=0,b=0,c=2,d=1 |
| style="" | a=1 |
| p{} | a=0,b=0,c=0,d=1 |
| div p | a=0,b=0,c=0,d=1 |
| div p.sith | a=0,b=0,c=1,d=2 |
| #sith | a=0,b=1,c=0,d=0 |
| body#darkside.sith p{} | a=0,b=1,c=1,d=2 |
样式覆盖
如果选择器一模一样，但写了2遍，则下面的覆盖上面
div{color:#333;}
div{color:#999;}
爱恨（lvha）原则
a:link, a:visited, a:hover, a:active的顺序的原因：
浏览器解析都是从上往下解析
a:visited位于a:hover和a:active前面的原因
如果a:visited位于a:hover和a:active的后面，则点击之后，a:hover和a:active失效。这是因为当点击之后再用后两种属性则这时，链接同时具有a:visited,a:hover两种属性，由于a:visited属性会覆盖前面的属性，所以另外两种属性会失效。
a:link位于a:hover和a:active前面的原因
如果位于两者的后面，则链接还没有被点开的时候，同时具有这三种属性，由于浏览器由下往上解析，则先解析a:link，则放弃了a:hover,和a:active的重复定义。
a:hover位于a:active前面的原因
当鼠标按下的时候，也是在hover状态，如果位于后面，则hover就会覆盖active的颜色。
a:link和a:visited顺序呢无所谓，因为不会同时触发。
div:first-child和div :first-child以及div:first-of-type,div :first-of-type的区别
div:first-child表示其父元素的第一个子元素，并且该标签为div。
div :first-child表示div的第一个子元素。
div:first-of-type表示其父元素的所有子元素中，标签为div的第一个子元素（不管该div标签是不是第一个子元素）。
div :first-of-type表示div作为父元素的同种标签的第一个。
选择器的含义
#header{}表示选中id是header的元素
.header{}表示选中class=header的元素
.header .log{}表示选中class=header的元素的后代是class=logo的元素
.header.mobile{}表示选中同时拥有header和mobile类的元素
.header p, .header{}表示选中id=header的元素的后代p和class=header的元素的后代h3
#header .nav>li{}表示选中id=header的元素的后代class=nav下的所有li
#header a:hover{}表示匹配id=header的后代a的鼠标悬停效果
#header .logo~p{}表示匹配id=header的后代中，类名为logo元素之后的同级元素中的所有p标签
#header input[type="text"]{}表示匹配id=class的后代属性type=text的input元素。
运行代码，解析输出样式的原因
代码：
结果：
解析：.item1:first-child中.item1对应的元素为<p class="item1">aa</p>,<h3 class="item1">bb</h3>,<h3 class="item1">ccc</h3>,这三个元素的父元素是<div class="ct">,父元素的第一个标签是p,所以aa变为红色。
.item1:first-of-type中.item1的元素为<p class="item1">aa</p>，<h3 class="item1">bb</h3>,<h3 class="item1">ccc</h3>,这三个元素的父元素为<div class="ct">,首次出现的类型为p和第一个h3。所以，aa和bb为蓝色。
