任务7-css选择器

1.class和id的使用场景

class定义到页面上某一类的元素，可以在多个标签内使用。
id定义到页面上唯一的元素，每个id只能使用一次。

2.css选择器常见的有几种？

• 基础选择器

选择器	含义
*	通用元素选择器，匹配页面任何元素
#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	id和class选择器和选择器连写的时候中间没有分隔符，“.”和“#”本身充当分隔符元素
element#id	id和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:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配当前选中的元素
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于：nth-last-type(1)
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1

• 伪元素选择器

选择器	含义
E::before	在E元素之前插入生成的内容
E::after	在E元素之后插入生成的内容

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

• 优先级别由高到低为
  1.在属性后面使用“!important”会覆盖页面内任何位置定义的元素样式
  2.作为style属性写在元素标签上的内联样式
  3.id选择器
  4.类选择器
  5.伪类选择器
  6.属性选择器
  7.标签选择器
  8.通配符选择器
  9.浏览器自定义
• 复杂场景优先级别判定
  假设：
  行内样式<div style="xxx"></div>代号为“a”
  id选择器代号为“b”
  类，属性选择器、伪类选择器代号为“c”
  标签选择器、伪元素选择器代号为“d”

举例：

代码	计数
p { }	a=0 b=0 c=0 d=1
a:hover { }	a=0 b=0 c=1 d=1
ul li { }	a=0 b=0 c=0 d=2
ul ol+li { }	a=0 b=0 c=0 d=3
h1+input[type=hidden] { }	a=0 b=0 c=1 d=2
ul ol li.active { }	a=0 b=0 c=1 d=3
#ct .box p	a=0 b=1 c=1 d=1
div#header:after	a=0 b=1 c=0 d=2
style="xxx"	a=1 b=0 c=0 d=0

比较规则：先比较a的大小，a大的优先级高；如果a相等，再比较b的大小，b大的优先级高以此类推。
在以下代码中：

#test p.class1{}
#test  .class1.class2

两者都有id"text"就是b相同，下面这条代码有两个class则为有两个c则优先下面这条代码

注意：
1.!important的优先级是最高的，但出现冲突时则需比较”四位数“;
2.优先级相同时，则采用就近原则，选择最后出现的样式;
3.继承得来的属性，其优先级最低;
　　!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认

4.a:link,a:houer,a:visited的顺序是怎么样的，为什么？

a:link:匹配所有未被点击的链接
a:houer:匹配鼠标悬停其上的a元素
a:active:匹配鼠标已经其上按下、还没有释放的元素
a:visited:匹配所有已被点击的链接
因为四个选择器都为同级，为了避免相互覆盖，推荐用以下顺序：
a:link → a:visited → a:hover → a:active
(未点击) (已点击) (鼠标悬停) (按鼠标未释放)

5.以下选择器分别是什么意思？

• 列出你知道的伪选择器
• div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
• 运行如下代码，解析下输出样式的原因。

答：

• 选择器含义：

  
  

• 伪类选择器

选择器	含义
E:first-child	匹配元素E的第一个子元素
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下、还没有释放的元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配当前选中的元素
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于：nth-last-type(1)
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1

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

名称	含义
div:first-child	匹配父元素下第一个div元素
div:first-of-type	匹配父元素下使用同种标签的第一个div元素
div :first-child	匹配div的后代中第一个子元素
div :first-of-type	匹配div的后代中的同种类型标签的第一个元素

代码输出样式及原因：

.item1:first-child{     
  color: red;
}

含义是class="item1"下第一个子元素的字体变为红色

.item1:first-of-type{
  background: blue;
}

含义是class="item1"下的有相同标签的第一个子元素背景变为蓝色