something about css（2）

class 和 id 的使用场景?

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

CSS选择器常见的有几种?

• 基础选择器

选择器	含义
*	通用选择器
#id	id选择器
.class	类选择器
element	标签选择器

• 组合选择器

选择器	含义
E, F	多元素选择器，匹配 E ，同时也匹配 F
E F	后代选择器，匹配 E 元素所有的 F 后代，不论嵌套多少层
E>F	直接后代选择器，匹配 E 元素的直接子元素中的 F 元素，子元素的后代元素不再做选择
E+F	直接相邻选择器，选中 E 后直接相邻的同级 F
E~F	普通相邻选择器，选中 E 后所有同级 F
EF	多条件选择器，连写 id 和 class 选择器，匹配 是 E 又是 F 的元素

• 属性选择器

选择器	含义
E[attr]	匹配所有具有 attr 属性的 E 元素
E[attr = value]	匹配所有attr 属性值为 value 的 E 元素
E[attr ~= value]	匹配所有attr 属性值具有多个空格分隔，其中一个值为 value 的 E 元素
E[attr ^= value]	匹配所有attr 属性值以 value 开头的 E 元素
E[attr $= value]	匹配所有attr 属性值以 value 结尾的 E 元素
E[attr *= value]	匹配所有attr 属性值包含 value 子串的 E 元素

• 伪类选择器

选择器	含义
E:first-child	匹配父元素下的第一个子元素
E:link	匹配未被点击的链接
E:visited	匹配点击过的链接
E:active	匹配当前被鼠标点下未释放的元素
E:hover	匹配鼠标悬停其上的元素
E:focus	匹配当前获得焦点的元素
E:lang(c)	匹配lang属性值等于c的元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbook元素
E:selection	匹配当前用户选中的元素
E:first-of-type	匹配父元素下使用同种标签的第一个子元素
E:first-child	匹配父元素下第一个子元素

• 伪元素选择器

选择器	含义
E::first-line	匹配 E 元素内容的第一行
E::first-letter	匹配E元素内容的第一个字母
E::before	在E元素之前插入生成的内容
E::after	在E元素之后插入生成内容

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

优先级：

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在链接访问之后永久生效，且会覆盖别的样式，所以要放在最后。

解释下列选择器的意义?

选择器	含义
#header{}	选择id为header的元素
.header{}	选择类为header的元素
.header .logo{}	选择类名为header后代中类名为logo的元素
.header.mobile{}	类名包含header和mobile的元素
.header p, .header h {}	选择类名为header后代中的p和h元素
#header .nav>li{}	选择id为header后代中类名为nav的直接子元素li
#header a:hover{}	选择id名为header后代中被鼠标悬停的a元素
#header .logo~p{}	选择id名为header后代中类名为logo之后的同级p元素
#header input[type="text"]{}	选择id名为header后代中type=“text”的input元素

列出你知道的伪类选择器

上面已经列出了。

选择器	作用
div:first-child	div的父元素下第一个元素且为div元素
div:first-of-type	div父元素下第一个div元素
div :first-child	选择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>

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

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