1. class 和 id 的使用场景?
class可以选择多个选择同一类型的元素,方便复用样式
Id具有唯一性，一个id只能匹配一个元素
2. CSS选择器常见的有几种?
基础选择器有ID选择器#id、类选择器.class、通配符选择器*、标签选择器div。
3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级？
①选择器优先级，从高到低：
- 在属性后面使用!important会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
②复杂场景计算权重:
从 0 开始，一个行内样式 +1000，一个 ID +100，一个属性选择器/class/伪类 +10，一个元素名/伪元素 +1。
相同的权重,以后面出现的选择器为最后规则.
不同的权重,权重值高则生效
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
正确顺序应为：
- a : link
- a : visited
- a : hover
- a : active
其中，link和visited位置可以互换
可以简单记为** lv-ha**
原因：
1.当选择器优先级别相同时，后定义的会覆盖先定义的
2.以此类推，当鼠标经过未访问链接，同时有link和hover属性，
由于后定义的覆盖先定义的，所以hover在后面
以此类推，当鼠标经过已访问链接，同时有visited和hover属性，
由于后定义的覆盖先定义的，所以hover在link和visited后面
5. 以下选择器分别是什么意思?
#header{这是一个id选择器
}
.header{这是一个类选择器
}
.header .logo{选择.header类选择器下的.logo
}
.header.mobile{选择同时有.header和.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后代的inpu标签且满足type属性为text
}```
####6. 列出你知道的伪类选择器
>`:active`
向被激活的元素添加样式。
`:focus`
向拥有键盘输入焦点的元素添加样式。
`:hover`
当鼠标悬浮在元素上方时，向元素添加样式。
`:link`
向未被访问的链接添加样式。
`:visite`
向已被访问的链接添加样式。
`:first-child`
向元素的第一个子元素添加样式。
`:lang`
向带有指定 lang 属性的元素添加样式。
>
####7. div:first-child和div:first-of-type的作用和区别
>div:first-child，先找到div元素，看看它是不是父元素的长子(第一个子元素)，如果是，那么就匹配之。
div:first-of-type，先找到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的意思是选择.itemd的第一个子元素 给他一个红色字体属性所以只有aa变红了
.item1:first-of-type的意思是选择.item的第一个标签类型,给他一个蓝色背景属性而
<p class="item1">aa</p> <h3 class="item1">bb</h3>都是.item的第一个标签类型,所以都得到了蓝色背景属性<h3 class="item1">ccc</h3>一个属性都没得到 所以只有h3的默认属性**
网友评论