web前端-css小记(2)

1. class 和 id 的使用场景?

---

1. class：类选择器，不限于只针对单个元素使用，若有若干个元素要使用相同样式可以定义相同class名。

2. id：ID选择器，每个标签有且只有一个id，且不能和其他标签重名，所以id选择器只能控制单个元素。

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

选择器	含义
element	标签选择器
*	通配符选择器
.class	类选择器
#id	ID选择器
选择器,选择器	多元素选择器
选择器 选择器	后代选择器
E[attr]，E[attr=value]	属性选择器
E:	伪类选择器
E:before，E:after	伪元素选择器

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

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

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两种属性，后面的属性会覆盖前面的属性定义；
所以说，a:hover定义一定要放在a:link、a:visited的后面,

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

选择器	含义
#header{}	Id=header的元素
.header{}	class=header的元素
.header .logo{}	header元素的子元素中类为logo的元素
.header.mobile{}	class包含header和mobile的元素
.header p, .header h3{}	匹配两个类型的元素，类型1是header类的后代p标签，类型2是header类的后代h3标签
#header .nav>li{}	id为header的子元素中，class为nav的直接子元素为li的元素
#header a:hover{}	id为header的子元素a在hover状态（鼠标悬停其上）下的样式
#header .logo~p{}	id为header的子元素中，类名为logo的元素之后的同级元素中，的p标签
#header input[type="text"]{}	id为header的子元素中，input的type属性为"text"的元素集合

6. 列出你知道的伪类选择器

伪类选择器	含义
E:first-child	元素E的第一个子元素
E:nth-child(n)	元素E的第n个子元素
E:last-child	元素E的最后一个子元素
E:enabled和E:disabled	元素E的状态为可用/不可用
E:checked和E:selection	元素E的状态为单选框选中/复选框选中
a:link	未被点击的链接
a:visited	已被点击的链接
a:hover	鼠标悬停其上的链接
a:active	鼠标已经按下，但没有释放的链接

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

伪类选择器	含义
div:first-child	父元素里的第一个子元素为div元素
div:first-of-type	父元素里的第一个div元素
div :first-child	父元素为div下的第一个子元素
div :first-of-type	父元素为div下的不同标签元素的第一个元素

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

 <style>
.item1:first-child{
  color: red;                        /*指定父元素中第一个类名为item1的元素的字体颜色为红色*/
}
.item1:first-of-type{
  background: blue;                  /*父元素中每一类元素的第一个类名为item1的元素的背景色为蓝色*/
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>                                      /*aa，bb一行显示的是蓝色，ccc一行不显示颜色*/

（mission7）