class 和 id 的使用场景?

• id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
• class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时

CSS选择器常见的有几种?

• 基础选择器

• 组合选择器

• 属性选择器

• 伪类选择器

• 伪元素选择器

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

优先级：

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

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

1. a:link
2. a:visited
3. a:hover
4. a:active

因为a:visited在链接访问之后永久生效，且会覆盖别的样式，所以要放在最后。

解释下列选择器的意义?

列出你知道的伪类选择器

上面已经列出了。

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

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

1. 将类名为item1的元素的父元素的第一个子元素的字体颜色设置为红色，因为三者都是同级元素所以选择的都是p元素。

2. 将类名为item1的元素的父元素的第一个同种类型的元素的背景颜色设置为蓝色，所以设置第一个p和第一个h3元素的背景颜色。