1.class 和 id 的使用场景?
- class是将一类元素的样式抽取出来，它可以管控多个元素的样式；
- id是唯一的，控制单个元素的样式
2.CSS选择器常见的有几种?
- 基础选择器
- 通配符选择器
- id选择器
- 类选择器
- 标签选择器
- 组合选择器
- 多元素选择器：以','分隔，表示同时匹配多个选择器对应的元素
- 后代选择器：以空格分隔
- 属性选择器
- E[attr]：筛选出所有具有属性名为attr的属性的元素
- E[attr=value]：筛选出所有属性attr的值为vlaue的元素
- 伪类选择器
- 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：鼠标按下但未释放时的样式
- 伪元素选择器
- E:before：在E元素之前插入的内容
- E:after：在E元素之后插入的内容
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
- 优先级：
- !important：在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 内联样式：style="..."
- ID选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
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{}
.header{}
.header .logo{}
.header.mobile{}
.header p, .header h3{}
#header .nav>li{}
#header a:hover{}
#header .logo~p{}
#header input[type="text"]{}
- #header{}：匹配Id=header的元素
- .header{}:匹配类class=header的元素
- .header .logo{}：
匹配类为header元素的后代元素中类为logo的元素 - .header.mobile{}：
匹配类名包含header和mobile的元素，如class = 'beader mobile' - .header p, .header h3{}：
匹配两个类型的元素（并集，‘或’关系），类型1是header类的后代p标签，类型2是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"的元素集合
6.列出你知道的伪类选择器
- E:first-child：匹配元素E的第一个子元素
- E:nth-child：匹配元素E的第n个子元素
- 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）
- div:first-of-type：父元素中的第一个div元素
- 区别：如
<body>
<p>title</p>
<div>div1</div>
<div>div2</div>
</body>
1.div:first-child指定必须是第一个元素的div标签，所以无效果
2.div:first-of-type指定第一个div标签，所以是指div1所在的div标签样式
8.运行如下代码，解析下输出样式的原因。
<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标签被选中）
网友评论