Task 7
class 和 id 的使用场景?
首先明白class和ID的语义：
class
class 属性规定元素的类名（classname）。
class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。
提示和注释
注释：class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。
提示：可以给 HTML 元素赋予多个 class，例如：<span class="left_menu important">。这么做可以把若干个 CSS 类合并到一个 HTML 元素。
提示：类名不能以数字开头！只有 Internet Explorer 支持这种做法。
id
id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
联系：
id的优先级高于class，并且由于id语义的特殊性，同一个id，页面中只能出现一次，通常id作为与JS进行DOM互动而使用。
如果在页面中要对某个对象进行脚本操作（js），那么可以给他定义一个id，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个id来得简单。
ID is for JavaScript, Class is for CSS.
CSS选择器常见的有几种?
类选择器：.class
ID选择其：#id
元素选择器：element
属性选择器：[attribute]
伪类选择器：:hover ，：active，:focus等
复合选择器：element > .class，element+element等
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
请看CSS权重计算
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link {
color: black;
}
a:hover {
color: blue;
}
a:active {
color: green;
}
a:visited {
color: red;
}
</style>
</head>
<body>
<a href="#">Hello World!</a>
</body>
</html>
以上面代码为例，鼠标指向标签，蓝色，点击鼠标按下，绿色，之后为已访问状态，变为红色。但是之后再次触发hover和active事件后却不在有反应了。
我们都知道，在CSS中，最后声明的样式优先级是最高的，尽管每一个伪类看起来类似于一个不同的选择器，其实它们都是对链接的不同状态的样式的定义，可以认为它们是相同的选择器，是可以相互覆盖，也就是说这几个伪类之间也是遵循上面所说的优先级原则的。
链接被点击后，a:visited所声明的样式就会生效，所以a:hover和a:active所声明的样式就会被a:visited所覆盖。
解决方法是什么？当然是不用它啦2333333（开玩笑：-）
选择正确的放置顺序：
思考一下，既然a:visited在最后会覆盖hover和active，那它显然不能放置在最后，而link是网页加载结束后第一时间呈现给用户的，理所当然的放在第一个。OK，就剩hover和active的顺序，即第三和第四放谁。
想一想，整个事件过程，在active事件触发之前，必定会触发hover，这个很好理解，假设hover放在最后（4），当鼠标移至链接后，触发了hover样式，注意了！这里hover是最后一个样式，覆盖了active（3）的样式，当你点击后，不会在有active的样式触发。所以，第三个应该放置hover，第四个放置active。（按下鼠标触发active，松开后，此时就是hover样式产生作用，）
正确顺序：
a:link
a:visited
a:hover
a:active
记为：LVHA
a:link、a:visited、a:hover、a:active的用法
说白了，当需要多种样式共同作用于一个标签时，如何排列这些样式，使之不矛盾不冲突。
解释一些选择器
#header {
}
// 选择，ID为header的元素
.header {
}
// 选择，类名为header的元素
.header .logo {
}
// 选择，类名为header的元素下，类名为logo的元素
.header p , .header h3 {
}
// 选择，类名为header元素下的所有p元素，所有h3元素（递归选择，包括子子代......）
#header .nav>li {
}
// 选择，id名为header元素下，子元素中，类名为nav的li元素
#header a:hover {
}
// 选择，id名为header元素下，所有伪类为:hover的a元素
#header .logo~p {
}
// 选择，id名为header元素下，类名为logo的元素，往下相邻最近的p元素
#header .logo~p
#header input[type="text"] {
}
// 选择id为header的元素下，type属性为text的input元素
列出你知道的伪类选择器
:hover
:focus
:visited
:link
:empty 选择每个没有任何子级的元素（包括文本节点）。
:nth-child(n) 选择任意元素下的第n个元素
:nth-last-child(n) 选择任意元素下，倒数第n个元素
:before 在某个元素之前插入内容
:after 在某个元素之后插入内容
........
菜鸟 —— 伪类选择器
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
element:first-child // :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
这个是W3C的解释，是不是想砍人？YEAH!!
换句话说就是：element元素的父元素，这个父元素下的，第一个element元素。
test
可以看到，
h3:first-child中，意思是h3的父元素（#id_div），这个父元素内，第一个元素为h3的元素。可是第一个元素没有是h3的，所以选择不生效。
那么，div:first-child：选择div的父元素下，第一个元素为div的元素
那些年踩过的坑之:first-child伪类选择器 - wangmeijian - 博客园
element:first-of-type // :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。
噢NO！说的啥玩意。
其实改一下那句话，element的父元素，父元素下，类型为element的元素中，第一个，对没错，就是你。
test
这样，h3就能被选中了。first-of-type选择的范围就更少，如果没有相应的类型元素，那么样式也不会生效。
div :first-child // 带空格了
带个空格我就怕你？呔，就是多了个选择范围嘛，E e:first-child
这样就看懂简单了嘛，同样的选择规则，只是这个规则只在E元素下进行。
同理，div :first-of-child也一样。
But，如果我们啥都不填会怎么样呢？
test
test里看起来找不到啥规律，唯一肯定的就是:号前的元素，决定了规则进行的范围，即将在哪个元素下进行选择。
可能:first-child必须有参数？否则如何选择到其父元素呢？
待研究，也希望有懂得大神告知~
运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
首先我换了下颜色，太亮瞎眼了，换成绿色，上图：
代码
然后我加了一组标签，答案似乎见分晓了。
代码
.item1:first-child{
color: red;
}
// 意思是，首先选择类名为item的元素的父元素，即.ct，这个父元素下（子元素中），类名为item元素集合内，位置是第一个的！对，就是你别看了233333。
//因为所有子代都加了.item，所以就是第一个子元素，这在我新加入标签后也得到验证。
.item1:first-of-type{
background: blue;
}
// 选择类名为item的元素的父元素，父元素下，所有类名为item的元素，类型相同的元素集合内，位置是第一个的......
这里有些拗口，解释一下：首先所有子代加了类名，而first-of-type还有一个判断根据就是类型判断，我更改的代码中有：sapn,p,h3，共3种类型的标签。怎么选呢？就是，每种类型集合内，位置是第一个的元素，因为它的:号前指定的是类名，而不是元素，如果我要选择h3，那可以改成：
.ct h3:first-of-type
对啦
