一、class 和 id 的使用场景?

• class是将一类元素的样式抽取出来，它可以管控多个元素的样式；
• id是唯一的，控制单个元素的样式

二、CSS选择器常见的有几种?

1、基础选择器

• 通配符选择器
• id选择器
• 类选择器
• 标签选择器
  2、组合选择器
• 多元素选择器：以','分隔，表示同时匹配多个选择器对应的元素
• 后代选择器：以空格分隔
  3、属性选择器
• E[attr]：筛选出所有具有属性名为attr的属性的元素
• E[attr=value]：筛选出所有属性attr的值为vlaue的元素
  4、伪类选择器
• E:first-child：父元素的各类标签中第一个子元素且必须符合指定类型（为E）
• E:nth-child：匹配其父元素的第n个子元素
• E:enabled和E:disabled
• E:checked和E:selection
• E:link：未被访问时的样式
• E:visited：已经被访问后的样式
• E:hover：鼠标悬停在a链接之上的样式
• E:active：鼠标按下但未释放时的样式
  5、伪元素选择器
• E:before：在E元素之前插入的内容
• E:after：在E元素之后插入的内容

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

1、选择器的优先级

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

2、复杂场景优先级计算从最高权重开始比较，相同则比较下一个权重，权重高的优先级高于权重低的

四、 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的后面,

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

#header{} /*ID为header的元素*/

.header{} /*CLASS为header的元素*/

.header .logo{} /*class为header 子元素中 class为logo的元素*/

.header.mobile{} /*类名包含header和mobile的元素，如class = 'beader mobile'*/

.header p, .header h3{} /*header类的后代p标签或者header类的后代h3标签*/

#header .nav>li{} /*id为header的后代中，类名为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"的元素集合*/

六、列出你知道的伪类选择器

• a:link：未被点击的链接
• a:visited：已被点击的链接
• a:hover：鼠标悬停其上的链接
• a:active：鼠标已经按下，但没有释放的链接
• E:first-child：匹配元素E的第一个子元素
• E:nth-child：匹配元素E的第n个子元素
• E:enabled和E:disabled：匹配元素E的状态为可用/不可用
• E:checked和E:selection：匹配元素E的状态为单选框选中/复选框选中

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

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

• .item1:first-child{ color: red;}
  指定父元素中第一个类名为item1的元素的字体颜色为红色
• .item1:first-of-type{ background: blue;}
  父元素中每一类元素的第一个类名为item1的元素的背景色为蓝色，
  （即现将div中的子元素分为p、h3两类标签，每一类取第一个类名为item1的元素，最终：内容为aa的p标签和内容为bb的h3标签被选中）