1、class 和 id 的使用场景?
class 匹配class包含特定类的元素，
比如说页面有些元素有共同的特征。如果有个别不一样的
那么再加一个class属性。
如果是独一无二的那么我们就起名为id
2、CSS选择器常见的有几种?
1、基础选择器
2、组合选择器
3、属性选择器
4、伪类选择器
5、伪元素选择器
3、选择器的优先级是怎样的?对于复杂场景如何计算优先级？
id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 通配符选择器
对于复杂场景
行内样式 用 a表示
id选择器用 b 表示
类选择器，伪类选择器，属性选择器 用 b表示
标签选择器用 d 表示
有哪一个选择器我们就在对应的上面加1。
比如 #test p.class1 和 #test .class1.class2
这两个比较 ，首先b的值是都为1 ，那么我们就继续往下比较 明显后者的c为2 而前者的c仅为1
所以，后者的优先级高于前者。
4、a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:link a:visited a:hover a:active
a:visited 如果写在后面的话，会把a:hover a: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下class为nav的直接子元素里li标签
#header a:hover { }
选择id为header下的链接，给其在悬停状态添加样式
#header .logo~p { }
选择id为header下,匹配class为logo之后的同级p标签。
#header input[type="text"] { }
选择id为header下input标签类型为text的元素
6、 列出你知道的伪类选择器
- E:first-child
- E:link
- E:hover
- E:visited
- E:active
- E:checked
- E::selected
- E:fist-of-type
- E:nth-of-type(2)
- E:enabled
- E:disabled
- E:focus
7、div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别
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的父元素为同一个class为ct的div元素，这个父元素下的第一个元素是p标签，同时class为item1,所以就会把aa变成红色；
之后.item1:first-of-type{ background: blue; } 首先 <p class="item1">aa</p>的父元素为class为ct的div元素，这个父元素下是p表签的只有一个，同时class也为item1
所以aa的背景色变成了蓝色。接着再看 <h3 class="item1">bb</h3>的父元素为class为ct的div元素，这个父元素下是h3标签的有两个，我们取第一h3标签，而这个h3的标签的clas正好是item1，所以bb的背景色为蓝色。最后一个<h3 class="item1">ccc</h3>的父元素同上，这个父元素下h3标签，有两个，取第一个，而这个h3的标签正好是item1，所以bb的背景色为蓝色。结果就是aa,bb的背景色为蓝色。
网友评论