CSS选择器

1. class 和 id 的使用场景?
   id用来指定标签的唯一标识
   应用场景:

• 根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)
• 用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点
  class指定标签的类名
  应用场景:
  CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类

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

• 基础选择器
• 组合选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
   从高到低依次:

• 在属性后面使用!important会覆盖页面任何位置定义的元素样式

• 作为style属性,写在标签上的内联样式

• id选择器

• 类选择器

• 伪类选择器

• 属性选择器

• 标签选择器

• 通配符选择器

• 浏览器自定义

  对于复杂场景而言:
  行内样式 ==> a
  ID选择器 ==> b
  类,属性选择器和伪类选择器 ==>c
  标签,伪元素 ==>d
  将选择器分为4部分, 每一部分出现一次就+1, 最后谁的权重比越 大, 优先级越高

4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
   a:link - 普通的、未被访问的链接
   a:visited - 用户已访问的链接
   a:hover - 鼠标指针位于链接的上方
   a:active - 链接被点击的时刻
   a:hover 必须位于 a:link 和 a:visited 之后
   a:active 必须位于 a:hover 之后
   一般这样定义:
   a:link { } a:visited { } a:hover { } a:active { }

大家知道最后声明的CSS代码效果要覆盖先前声明的代码的效果尽管每一个伪类看起来类似于一个不同的选择器，其实它们都是对链接的不同状态的样式的定义，可以认为它们是相同的选器，是可以相互覆盖，也就是说这几个伪类之间也是遵循上面所说的优先级原则的.

因为链接被点击之后 a:visited所声明的样式就会生效，当把鼠标放到链接之上或者当鼠标指针在链接之上并且按下鼠标键的时候a:hover或者a:active所声明的样式会被a:visited所覆盖.

为了正确的显示链接样式效果，我们可以遵循这样的原则，只要a:visited位于a:hover和a:active之前就可以实现正确的效果，但是有时候我们还是需要遵循以下一个大家共识的顺序：a:link、a:visited、 a:hover、 a:active，因为有些浏览器对a:hover的支持并不好。可能大家对顺序记忆起来比较难，那就看它们的首字母：LVHA

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的元素和class为header的后代为h3的元素 */
}

#header .nav>li{
/* id为header的后代中class为nav的子元素li */
}

#header a:hover {
/* id为header的后代中的a元素在鼠标悬停时 */
}

#header .logo~p {
/* id为header的后代中class为logo的元素后面所有兄弟元素中标签为p的元素 */
}

#header input[type="text"] {
/* id为header的后代中type为text的input元素 */
}

列出你知道的伪类选择器

• E:link
• E:visited
• E:active
• E:hover
• E:focus
• E:lang(c)
• E:enabled
• E:disabled
• E:checked
• E::selection
• E:first-child
• E:nth-child(n)
• E:nth-last-child(n)
• E:nth-of-type(n)
• E:nth-last-of-type(n)
• E:last-child
• E:first-of-type
• E:last-of-type
• E:only-child

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

div:first-child 指的一个div元素, 它是其父元素下的第一个子元素
div :first-child 指得是div后代中的第一个子元素
div:first-of-type 指得是一个div元素, 它是其父元素下的第一个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>

结果:

结果.png

.item1:first-child 指的是class为item1的父元素下的第一个class='item1'的元素, 为第一个p标签
.item1:first-of-type 指的是class为item1的父元素下的每类标签的第一个, 匹配到了第一个<p>,第一个<h3>元素