任务7-选择器

class 和 id 的使用场景?

class意思就是“类” 是对一类标签进行操作，是一种"范围杀伤"，而id选择器具有唯一性，是“精确打击”

CSS选择器常见的有几种?

基础选择器
- id选择器具有唯一性
- class选择器可重复
- ** 　* 通用选择器给整个页面都设定相关的样式
- 元素标签选择器
组合选择器
- 多元素选择器 A，B，C{ 属性 }
- 后代选择器 A B 匹配A元素范围内的所有子元素B
- 直接后代选择器 A>B 首先B是A的子元素其次是要 “直接” 就是只选择 “一层”的意思
- A+B 首先这两个元素是同级的，其次这两个要直接相邻是“亲兄弟”才行
- A~B 只要同级就可以匹配A元素之后的同级元素B 相不相邻都无所谓
属性选择器
- A[attr] 匹配所有具有属性attr的元素
- A[attr=value] 匹配属性值为value的元素
- A[attr~=value] 匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素
- A[attr^=value] 匹配属性attr的值以value开头的元素
- A[attr$=value] 匹配属性attr的值以value结尾的元素
- A[attr*=value] 匹配属性attr的值包含value的元素
伪类选择器
- A:first-child:匹配元素A的第一个子元素
- A:link ：匹配素有未被点击的链接
- A:visited :匹配所有已经被点击的链接
- A:active :匹配鼠标已经在其上按下，但是还没有释放的A元素
- A:hover :匹配鼠标悬停其上的A元素
- A:focus :匹配获得当前焦点的A元素
- A:lang(c) :匹配lang属性等于c的元素
- A:enabled :匹配表单中可用的元素
- Adisabled :匹配表单中禁用的元素
- A:checked: 匹配表单中被选中的radio或checkbox元素
- A:selection: 匹配用户当前选中的元素
- A:root :匹配文档的根元素，对于HTML文档，就是HTML元素
- A:nth-child(n) :匹配其父元素的第n个子元素，第一个编号为1
- A:nth-last-child :匹配其父元素的第n个子元素，第一个编号为1
- A:nth-of-type(n):与:nth-child作用类似，但是仅匹配使用同种标签的元素
- A:nth-last-of-type(n) :与nth-last-child作用相似，但是仅匹配使用同种标签的元素
- A:first-child:匹配父元素的第一个子元素
- A:last-child :匹配父元素的最后一个子元素
- A:first-of-type :即 A:nth-of-type(1)
- A:last-of-type :即 A:nth-last-of-type(1)
- A:only-child :匹配父元素下仅有的一个子元素
- A:only-of-type :匹配父元素下使用同种标签的唯一一个子元素
伪元素选择器
- A::first-line 匹配E元素内容的第一行
- A::first-letter 匹配E元素内容的第一个字母
- A::before 在E元素之前插入生成的内容
- A::after 在E元素之后插入生成的内容
  
  *content：''；一定得带上 *

选择器的优先级是怎样的?对于复杂场景如何计算优先级？

优先级排序
1. 带有!important的值权重最高，覆盖一切，但是要慎用！
2. 行内样式直接把样式与html代码混在一起写，这种方法写出来的样式，权重也很高，但是最好不要用。
3. ID选择器算是正常范围选择器内权重最高的了
4. 类选择器也就是 class选择器
5. 伪类选择器类似于 a:hover a:fouces 这种的选择器
6. 属性选择器操作input时常用像 input[type="text"] {}就是属性选择器了
7. 标签选择器像这种 p{} 这种选择器选择范围超级广，但是老师叮嘱过最好别用
8. 通配符选择器像这种 *{} 这种选择器基本不用了
9. 浏览器自带样式这种的话一般在写页面的时候都会被重置
复杂场景下的选择器优先级排序
上一个小题已经说明了选择器的优先级是怎么排的了，就我自己的理解来看，第一种第二种和第八第九种在正常状态下可以忽略了就，从id选择器开始，给每个种类的选择器的权限大小赋予相应的计量单位，我自己分配的计量单位如下：
1. id选择器在筛选之后的选择器中权重最高，所以给他的单位为“万”
2. class选择器弱一点儿给它单位 “千”
3. 伪类选择器的单位是“百”
4. 属性选择器的单位是“十”
5. 标签选择器的单位是 “个”
  接着举个栗子

看看权重

这是一只野猪

```

`a:link, a:hover, a:active, a:visited` 的顺序是怎样的？为什么？

这三个为类选择器的书写顺序为

a:link{}
a:visited{}
a:hover{}
a:active{}

之所以按这种顺序写是因为怕他们相互覆盖，影响显示效果

以下选择器分别是什么意思?

#header{
}
/*选择ID为header的元素*/

.header{
}
/*选择class为header的元素*/

.header .logo{
}
/*选择class为header的范围内 类名为logo的元素*/

.header.mobile{
}
/*选择既有header类又有mobile类的元素*/

.header p, .header h3{
}
/*给类名为header中的p和同样范围内的h3写上相同的样式*/

#header .nav>li{
}
/*id为header的范围中，类名叫nav的元素里，把表层的li都选上，不进行 “击穿式查找” */

#header a:hover{
}
/*给class叫header的范围内里面的a标签设一个hover为类*/

#header .logo~p{
}
/*选择id为header的范围面的class为logo的元素中p的所有所有所有同辈兄弟标签*/

#header input[type="text"]{
}
/*在class为header的范围内 选择输入框类型为text的输入框 设定相应的样式*/

列出你知道的伪类选择器

a:link 匹配所有未被点击的链接
a:visited 匹配所有已被点击的链接
a:active 匹配鼠标已经其上按下、还没有释放的E元素
a:hover 匹配鼠标悬停在上面时所产生的变化
a:enabled 匹配表单中可用的元素
a:disabled 匹配表单中禁用的元素
a:checked 匹配表单中被选中的radio或checkbox元素
a::selection 匹配用户当前选中的元素
a:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
a:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
a:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
a:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素

`div:first-child、div:first-of-type`的作用和区别

作用
div:first-child 选中其父元素下第一个子元素
div:first-of-type 选中其父元素下使用相同标签的第一个子元素

区别
这两种方式容易混淆，但是也容易区分，主要是要记住这两种选择器的选择依据，第一种是以子元素数量作为依据进行选择，第二种是以标签为依据进行选择在相同的标签中进行排位选择

运行如下代码，解析下输出样式的原因。


 
   aa
   bb
   ccc

显示结果为 aa文字颜色为红色，背景为蓝色，bb文字颜色为黑色背景蔚蓝色，ccc没有任何变化

原因

第一个样式选择器选的是将排序为第一的样式名为item1的元素里面的文字变成红色。

第二个选择器的意思是首先选择元素的位置也是选第一个元素不过不同在于是选择使用item1类名并且标签也是第一个的元素，确定范围之后进行筛选首先确定使用item1的元素有1个P标签2个h3标签，结果是选第一个p标签（其实就一个p标签也不用怎么选....），和第一个h3标签。最终结果就出来了。