css选择器相关小问题

1、class 和 id 的使用场景?

class是一种类型可以被多个不同种类的标签同时应用它所包含的属性，id是唯一的只能代表一个标签的特性

2、CSS选择器常见的有几种?

• 基础选择器
  1、通配符选择器 " * "
  2、class 类选择器 " . "
  3、id选择器 " # "
  4、标签选择器
• 属性选择器
  E[attr]：筛选出所有具有属性名为attr的属性的元素
  E[attr=value]：筛选出所有属性attr的值为vlaue的元素
• 组合选择器
  多元素选择器：以','分隔，表示同时匹配多个选择器对应的元素
  后代选择器：以空格分隔
• 伪类选择器
  E:first-child：父元素的各类标签中第一个子元素且必须符合指定类型（为E）
  E:nth-child：匹配其父元素的第n个子元素
  E:enabled和E:disabled
E:checked和E:selection
E:link：未被访问时的样式
  E:visited：已经被访问后的样式
  E:hover：鼠标悬停在a链接之上的样式
  E:active：鼠标按下但未释放时的样式
• 伪元素选择器
  E:before：在E元素之前插入的内容
  E:after：在E元素之后插入的内容

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

1、!important：在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2、内联样式：style="..."
3、ID选择器
4、类选择器
5、伪类选择器
6、属性选择器
7、标签选择器
8、通配符选择器
9、浏览器自定义
对于复杂的先按照以上顺序赋予ABCD...等级然后比较各等级的包含的个数，从高级往低级别的比较

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

正确的顺序为
a:link、a:visited、a:hover、a:active (其中，link和visited可以互换)
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

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

#header{ }id为header的元素
.header{ }class为header的元素
.header .logo{ }class为header的子元素中class为logo的元素
.header.mobile{ }class包含有header和mobile的元素
.header p, .header h3{ } class为header下的p标签和h3标签
#header .nav>li{ }id为header下的 class为 nav中的所有的li标签
#header a:hover{ } __ id为header中的a标签的hover效果的属性 __
#header .logo~p{ }__id为header中 class为logo的所有的p标签 __
#header input[type="text"]{ }__id为header中type为text的所有的input标签 __

列出你知道的伪类选择器
E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 匹配使用同种标签的元素中父元素的第n个子元素
E:nth-last-of-type(n) 匹配使用同种标签的元素父元素的倒数第n个子元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:not(selector) 匹配不符合当前选择器的任何元素

---

div:first-child是父元素的首个子元素且为div的元素，
div:first-of-type：选择属于其父元素的子元素中首类型且为 div元素。