【校招VIP】前端JS语言考点之选择器和优先级

考点介绍：

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

本期分享的前端JS语言考点之选择器和优先级，分为试题、文章以及视频三部分。

答案详情解析和文章内容可点击下方链接即可查看！

一、考点题目

1、CSS选择器有哪些？

解答：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=“external”]）、伪类选择器（a:hover, li:nth-child）......

2、CSS优先级顺序？

解答：CSS选择器优先级顺序：-!important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性.....

3、哪些属性可以继承？

解答：CSS可以继承属性：font-size, font-family, color.....

4、id 选择器和 class 选择器的区别

解答：一个 DOM 节点只能有一个 id ，但可以有多个 class。id 选择器只能作用于一个 DOM 元素，class 选择器可以作用于多个 DOM 元素.....

（答案点击下方链接查看哦）

二、考点文章

1、css规则、选择器（基础、复合）/选择器优先级

有两个主要的部分构成：选择器以及一条或多条声明（选择器 {样式}）……

2、【校招VIP】总结css选择器以及选择器的优先级

!important > 行内样式 > id选择器 > 类选择器=伪类选择器 > 标签选择器=伪元素选择器 > 通配符选择器 > 继承的样式 > 浏览器默认的样式……

3、【校招VIP】Css选择器种类以及优先级

元素选择器：以标签名开头，选择所有span元素……

（点击下方链接查看完整版）

三、考点视频

1、把CSS的复杂选择器和简单选择器放到一起比较优先级，会不会晕

当我们写页面的时候，不知道你会不会产生这样的问题，为什么我给他添加的这条样式分明已经选择到我要给的元素了，但是他的样式并没有生效，那是为什么呢……

更多资讯可搜索校招VIP小程序查看哦!
移动端链接：https://m.xiaozhao.vip/dTopic/detail/517
PC端链接：校招VIP，专题 - 校招VIP