class 和 id 的使用场景?###
id选择器定义特定id的唯一元素，class选择器定义特定类名的一类元素
id选择器的优先级仅次于行内样式，高于类选择器
CSS选择器常见的有几种?###
基础选择器
-
*通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用） -
#idid选择器，匹配特定id的元素 -
.class类选择器，匹配class包含(不是等于)特定类的元素 -
element标签选择器
组合选择器
-
E,F多元素选择器，用,分隔，同时匹配元素E或元素F -
E F后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F -
E>F子元素选择器，用>分隔，匹配E元素的所有直接子元素 -
E+F直接相邻选择器，匹配E元素之后的相邻的同级元素F -
E~F普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否） -
.class1.class2id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
属性选择器
-
E[attr]匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div -
E[attr = value]匹配属性attr值为value的元素，div[id=test],匹配id=test的div -
E[attr ~= value]匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 -
E[attr ^= value]匹配属性attr的值以value开头的元素 -
E[attr $= value]匹配属性attr的值以value结尾的元素 -
E[attr *= value]匹配属性attr的值包含value的元素
伪类选择器
-
E:first-child匹配作为长子（第一个子女）的元素E -
E:link匹配所有未被点击的链接 -
E:visited匹配所有已被点击的链接 -
E:active匹配鼠标已经其上按下、还没有释放的E元素 -
E:hover匹配鼠标悬停其上的E元素 -
E:focus匹配获得当前焦点的E元素 -
E:lang(c)匹配lang属性等于c的E元素 -
E:enabled匹配表单中可用的元素 -
E:disabled匹配表单中禁用的元素 -
E:checked匹配表单中被选中的radio或checkbox元素 -
E::selection匹配用户当前选中的元素 -
E:root匹配文档的根元素，对于HTML文档，就是HTML元素 -
E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1 -
E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1 -
E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素 -
E:nth-last-of-type(n)与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 -
E:last-child匹配父元素的最后一个子元素，等同于:nth-last-child(1) -
E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
伪元素选择器
-
E::first-line匹配E元素内容的第一行 -
E::first-letter匹配E元素内容的第一个字母 -
E::before在E元素之前插入生成的内容 -
E::after在E元素之后插入生成的内容
选择器的优先级是怎样的?对于复杂场景如何计算优先级？###
选择器的特殊性分为4个等级：a b c d，计算abcd的值，值越大权重越高
*注：使用！important会覆盖页面内任何位置定义的元素样式 *
- 如果是行内style样式a=1
- id选择器的个数对应b的值
- 类、属性、伪类选择器的数量对应c的值
- 标签选择器、伪元素选择器的数量对应d的值
例如：
| 选择器 | 特殊性 | 以10为基数的特殊性 |
|---|---|---|
| style=" " { } | 1,0,0,0 | 1000 |
| #wrapper #content { } | 0,2,0,0 | 200 |
| div#content { } | 0,1,0,1 | 101 |
| p.comment .dateposted { } | 0,0,2,1 | 21 |
| p | 0,0,0,1 | 1 |
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？###
正确的顺序：
a:link /* 匹配所有未被点击的链接 */
a:visited /* 匹配所有已被点击的链接 */
a:hover /* 匹配鼠标按下未被释放的链接 */
a:active /* 匹配鼠标悬停其上的链接 */
原因： a:visited表示已被访问的链接，是链接被访问后永久生效的，如果放在最后会覆盖掉其他样式 。hover必须放在active之前，如果放在之后用户点击鼠标显示的也是hover样式
以下选择器分别是什么意思?###
#header{
} /* 定位id="header"页面内特定元素 */
.header{
} /* 匹配class="header"的一类元素 */
.header .logo{
} /* 匹配class=header元素后代中所有class=logo的元素（包括子元素、子元素向下递归）*/
.header.mobile{
} /* 匹配即包含class=header又包含class=mobile的元素 */
.header p, .header h3{
} /* 同时匹配class=header后代中标签为p和h3的元素，非即又关系 */
#header .nav>li{
} /* 匹配id=header后代中所有class=nav的直接子元素li */
#header a:hover{
} /* 匹配id=header后代中所有鼠标悬停其上样式的元素 */
#header .logo~p{
} /* 匹配id=header后代中所有与class=logo同级元素的p */
#header input[type="text"]{
} /* 匹配id=header元素后代中所有属性为type=text的元素 */
列出你知道的伪类选择器###
伪类选择器
-
E:link匹配所有未被点击的链接 -
E:visited匹配所有已被点击的链接 -
E:active匹配鼠标已经其上按下、还没有释放的E元素 -
E:hover匹配鼠标悬停其上的E元素 -
E:focus匹配获得当前焦点的E元素 -
E::selection匹配用户当前选中的元素 -
E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1 -
E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）###
div:first-child：匹配 既是divy元素 又是同级元素的第一个元素 两个条件必须同时满足
div:first-of-type：匹配同级元素中第一个div元素
div :first-child：加空格指的是div后代中第一个子元素
div :first-of-type：加空格指的是div后代中第一个同种类型子元素
运行如下代码，解析下输出样式的原因###
<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>
运行结果：
10.png
原因：
.item1:first-child{
color:red;
} / * 匹配item1父元素的第一个子元素* /
item1父元素的第一个子元素是p标签的item1，所以是aa显示红色
.item1:first-of-type{
background: blue;
} / * 匹配item1父元素的第一个同种类型的子元素* /
item1父元素的子元素是p标签的item1，同种类型的还有两个h3，第一个同种类型，所以第二个背景不变蓝
