选择器类型

1. 基础选择器

例子：

 * {
    margin: 0;
    padding: 0;
  }

  #id-selector{
    color: #333;
  }

  .class-selector{
    background: #ccc;
  }

  p {
    font-size: 20px;
  }

class 和 id 的使用场景?

class：页面上某一类元素有共同的特征，可用class
id：页面上元素有独一无二的特征，可用id。

2. 组合选择器

3. 属性选择器

input[type=password]{
  
      }

4. 伪类选择器

5. 伪元素选择器

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

此四个选择器的权限都是一致的，但是会根据用户动作不同而产生不同的反应。
顺序：

1. a:link选择未被访问的链接，链接没有被点击或者没有被鼠标停留时；
2. a:hover选择当鼠标指针浮动在链接上方时，此时hover覆盖link元素
3. a:active当鼠标在一个链接上点击时，它就会被激活，此时active覆盖hover
4. a:visited当鼠标点击完毕，即访问完成时，并永久覆盖active

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

#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标签，
    和匹配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
}

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

div:first-child {
    等同于nth-first-child(1)
    匹配父元素的第一个div元素
}
div :first-child{
    匹配div标签下第一个任意元素
}

div:first-of-type{
    等同于nth-of-type(1)
    匹配父元素下使用div的第一个子元素
}
div :first-of-type{
    匹配div标签下任意标签的第一个元素
}

选择器优先级

从高到低分别是

1. 在属性后面使用!important会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

!important为最高级，藐视一切。
其余可按照各类选择器分类：1. 内联样式为A类；2. id选择器为B类；3.类，属性选择器和伪类选择器为C类；4.标签选择器、伪元素为D类
然后数一下ABCD类那个多，其中A>B>C>D

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

<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>

原因

.item1:first-child匹配class="item1"的第一个元素，故aa字体变为红色；
first-of-type匹配class="item1"其父元素下任意标签的第一个元素，故p标签中背景为蓝色；然后h3标签有两个，但是只取第一个，故bb字体的背景变为蓝色。

参考答案