1.class 和 id 的使用场景?
- id：id在一个页面中是全局唯一的，一个标签只能有一个id，多用于块级标签。使用"#"选择
- class：class在一个页面可以有多个，一个标签可以有多个class，多用于多个标签样式相似或相同时。使用"."来选择
2.CSS选择器常见的有几种?
- 基础选择器
Paste_Image.png
- 组合选择器
Paste_Image.png
- 属性选择器
Paste_Image.png
- 伪类选择器
Paste_Image.png
- 伪元素选择器
Paste_Image.png
- E:first-child 匹配一个元素为E且该E元素为老大哥
<style>
.poi>.item1:first-child{
color: red;
}
.item3:first-child{
color: blue;
}
</style>
<div class="ct">
<h3 class="item3">aa</p>
<h3 class="item2">bb</h3>
<h3 class="item1">ccc</h3>
</div>
<div class="aw">
<h3 class="item1">aa</p>
<h3 class="item2">bb</h3>
<h3 class="item3">ccc</h3>
</div>
<div class="aw">
<div class="poi">
<h3 class="item1">aa</p>
<h3 class="item2">bb</h3>
<h3 class="item3">ccc</h3>
</div>
</div>
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
3.1 优先级：
- ！important
- 内联样式
- id
- class
- 伪类
- 属性
- 元素
- 伪元素
- 浏览器自定义
3.2 复杂场景
a：内联样式
b：id
c： class、属性、伪类
d： 元素、伪元素
比较方法：a>b>c>d，当优先级相同时，计算同一级的个数，个数多的优先级大
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
- a:link
- a:visited
- a:hover
- a:active
原因：
- 首先优先级相同时，后定义的覆盖前面定义的
- 静态在前，动态在后，所以link和visited在前，hove和active在后
- 根据动作的先后顺序，所以link在visited前，hover在active之前。
5.以下选择器分别是什么意思?
#header{
//选择id=header
}
.header{
//选择class=header
}
.header .logo{
//选择class=header中后代为class=logo
}
.header.mobile{
//选择class=header mobile
}
.header p, .header h3{
//选择class=header中后代元素为p和h3
}
#header .nav>li{
//选择id=header中后代为nav的li子元素
}
#header a:hover{
//选择id=header中后代鼠标悬停的a元素
}
#header .logo~p{
//选择id=header中后代id=logo之后的同级p元素
}
#header input[type="text"]{
//选择id=header中后代具有type属性为“text”的input元素
}
6. 列出你知道的伪类选择器
- E:first-child
- E:link
- E:visited
- E:active
- E:hover
- E:focus
- E:lang(c)
- E:enabled
- E:disabled
- E:checked
- E:selection
7. div:first-child和div:first-of-type的作用和区别
- first-child：匹配其父元素的第一个子元素
- first-of-type：匹配其父元素下的不同类型的第一个子元素
8.运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{
color: red;
//匹配class="ct"中的<p class="item1">
}
.item1:first-of-type{
background: blue;
//匹配class="ct"的 <p class="item1">和<h3 class="item1">
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
