1、class 和 id 的使用场景?
#id：id选择器，匹配特定id的元素,一个页面ID具有唯一性，id选择器可以单独选择一个元素。
.class：类选择器，匹配属于某类的所有元素，可以选中多个元素。
2、CSS选择器常见的有几种?
类选择器
ID选择器
标签选择器
属性选择器
伪类选择器
伪元素选择器
3、选择器的优先级是怎样的?对于复杂场景如何计算优先级？
从上到下，从高到低优先级。
1）在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2）作为style属性写在元素标签上的内联样式
3）id选择器
4）类选择器
5）伪类选择器
6）属性选择器
7）标签选择器
8）通配符选择器
9）浏览器自定义
在复杂场景中，先将选择器按如下原则分类：
行内样式==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
计算选择器组合中每种类型选择器的数量，从a到d进行比较，a类数量多的优先级高，如果a类数量相同，则比较b类数量，依次类推。
如果数量一样，那么代码顺序靠后的优先。
4、a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
在实际使用中，顺序为a:link，a:visited，a:hover，a:active。因为当链接点击过后，a:visited状态就激活了，按照优先级原则，它们四个是相同的，这时就看谁最后声明，就会覆盖前面的样式。如果a:visited放在第三位，a:hover将被覆盖，a:visited放在最后则a:hover和a:active将被覆盖不能正确显示。
5、以下选择器分别是什么意思?
#header{} 选择id为header的元素。
.header{} 选择class等于或包含header的所有元素。
.header .logo{} 匹配所有class属于header元素的后代，且class属于logo的元素，之间用空格分隔。
.header.mobile{} 多类选择器，匹配同时包含这两个类的元素。
.header p, .header h3{} 匹配属于header类的后代中的P元素，同时匹配属于header类的后代中的H3元素。
#header .nav>li{} 匹配ID等于header的后代元素中的属于nav类的子元素中的li元素。
#header a:hover{} 匹配ID等于header的后代元素中的鼠标悬停其上的a元素。
#header .logo~p{} 匹配ID等于header的后代元素中的属于logo类元素后的所有与logo类元素同级的P元素。
#header input[type="text"]{} 匹配ID等于header的后代元素中的type属性等于text的input标签元素。
6、列出你知道的伪类选择器
E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector)匹配不符合当前选择器的任何元素
7、div:first-child和div:first-of-type的作用和区别
div:first-child 匹配所有div元素的父元素下的第一个子元素。
div:first-of-type 获配所有div元素的父元素下的第一个div子元素。
第二个选择器要求匹配相同的类型，即都是div标签。
8、运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p> 字体显示红色，背景为蓝色。因为.item1:first-child选择器选中了它，它是所有.item1类的父元素div的第一个子元素。也是.item1类的父元素div下的第一个同类型即p元素。
<h3 class="item1">bb</h3>字体颜色默认，背景色为蓝色。因为它是.item1类的父元素div下的第一个同类型即h3元素。
<h3 class="item1">ccc</h3> 字体和背景色都是默认，不发生变化。
</div>
网友评论