面试之CSS选择器？看这一篇就够了
前言
这段时间在整理跟面试题相关的知识点，进行查缺补漏，而后本身对于CSS选择器这部分知识点只是有一些了解，因此此次专门梳理一下CSS选择器的知识点。下面咱们就从面试官常问的几个问题开始入手css
第一问：CSS选择器是什么
咱们写页面的时候都知道，HTML页面的属性的各类样式是经过CSS来实现的。要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就须要用到CSS选择器。 HTML页面中的元素就是经过CSS选择器进行控制的。html
一个完整css属性选择器是由css命名及后面属性及属性值构成，{}前的部分是选择器，以下面的.head，{}内的部分是样式,如color:#fff。面试
.head {
color:#fff
}
复制代码
第二问：CSS选择器有哪些
CSS中有五大选择器，分别是通配符选择器，元素/标签选择器，类选择器，ID选择器，属性选择器浏览器
一.通配符选择器
实际上，通配符选择器咱们在开中常常会使用到，它同一个 * 表示，使用 * 做为选择器时，它能与 HTML 中全部元素进行匹配，好比下面咱们常在页面中设置的通配符选择器markdown
* {
margin:0;
padding:0;
}
复制代码
上面这个选择器就是将浏览器中对全部元素自带的 margin 值和 padding 值所有设置为0app
通配符选择器也能够用于选择某个元素下的全部元素,下面代码就是选中div的head类下全部元素，设置这些元素的背景色为红色学习
<style>
div.head * {
color: red;
}
</style>
<div class="head"> <p>我是 通配符 1号</p> <p>我是 通配符 2号</p> </div>
复制代码
二.元素选择器
元素选择器几乎是咱们最经常使用的选择器了，在HTML文档中该选择器一般是指某种HTML元素ui
h3 {
color:blue;
}
<h3>我是元素选择器</h3>
复制代码
上面代码是选中全部 span 元素，将它们的内容颜色设置为蓝色，相似的还有不少，例如：p,h2,a,div乃至html。url
三.类选择器
类选择器分为两种，单类选择器和多类选择器spa
单类选择器
使用元素选择器直接对元素进行操做可能还不够精细，这时咱们可使用类选择器直接对元素中的类进行样式设置。单类选择器的使用方法是元素名后加上 .类名，好比下面
h3.one {
color:yellow;
}
<h3 class="one">我是单类选择器</h3>
复制代码
当前缀的类名长的时候，咱们也能够省略，直接用类名进行选择
.one {
color:yellow;
}
<h3 class="one">我是单类选择器的省略</h3>
复制代码
多类选择器
实践开发中，元素中的类名可能不是一个单词，而是一长串单词，各个单词之间用空格分开。在解释多类选择器之间咱们先认识一下单类选择器会出现的一种状况。
当你的类名包含两个或以上的单词时，假设为 class="first study"， 这时使用两个单类选择器 .first { color="white" } .study { font-size:10px } ,这两个单类选择器会根据类选择器名对类名存在的单词进行检索，这里两个单类选择器都成功检索，因此最后的内容会将这两种样式都呈现出来。
如今，咱们来看看多类选择器 看下面状况,当咱们想直接对第三条 p 标签进行样式设置时，能够设置两个类名的限制条件，即 .first.study ，类名只要拥有这两个单词就能使用样式，这与单词顺序无关，由于写成 .study.first 效果也是同样的。咱们能够将元素选择器与多类选择器结合使用，在多类选择器前加上元素名就能够匹配指定元素的指定类名，好比 h4.first.study
.first {
color:blue
}
.study {
color:green
}
.first.study {
color:pink
}
<h4 class="first">我是多类选择器1</h4>
<h4 class="study">我是多类选择器2</h4p>
<h4 class="first study">我是多类选择器3</h4>
复制代码
四.ID 选择器
只从代码中看，或许咱们会以为ID选择器与类选择器有些相似，那么为何咱们有了类选择器还须要ID选择器呢？咱们先从类和ID的区别来看一下，一个元素能够拥有多个类，却只能有一个惟一ID，一个ID值在整个HTML中只能设置一次，不能重复设置和出现，因此ID值也是一个元素的惟一值（注意，不是一类元素，而是一个元素的惟一值），咱们想要对同元素名同类名的几个元素进行不一样的操做时，就须要使用到 ID选择器了
ID选择器的写法是 # + ID值
#one {
color:blue
}
#two {
color:yellow
}
#three {
color:red
}
<h5 class="first" id="one">我是ID选择器1</h5>
<h5 class="first" id="two">我是ID选择器2</h5>
<h5 class="first" id="three">我是ID选择器3</h5>
复制代码
从图中能够看出，咱们用ID选择器实现了对同元素名同类名的几个元素的不一样颜色的设置
五.属性选择器
属性选择器可让咱们直接对元素中的属性进行选中而后根据条件对该元素进行属性设置
1.简单属性选择器
根据一个元素中的具体属性进行选择，使用方法： 元素名[属性名] 或 *[属性名]， 下面给出一个例子，选择含有href属性的全部h2标签
a[href] {
color:red
}
<a href="">www.baidu.com</a>
复制代码
与多类选择器同理，咱们也能够设置多个属性选择条件，如 a[href][title]
a[href][title] {
color:red
}
<a href="" title="">www.baidu.com</a>
复制代码
2.具体属性值选择器
若是咱们相对属性进行更加精确的选择，那么你能够试试这个 <a href="www.baidu.com">www.baidu.com</a> 这里须要注意一点，选择器对于具体属性的值是进行顺序检索的，实质上是进行子符串匹配，因此咱们不能用非顺序的属性值进行选择，好比 a[href=".baidu.comwww"] 就没法匹配到。具体属性值一样能够设置多个匹配条件 例如：a[href="www.baidu.com"][title="0000"] ,选择href属性为www.baidu.com，title属性为0000的元素
3.部分属性值选择器
如你所见，使用具体属性匹配会让选择变得繁琐且多余，由于对元素进行如此精细的匹配，我为何不考虑 ID选择呢？ 事实上，咱们处理的更多的状况每每是选择在一串属性值中出现了某个关键字的元素，例如，咱们须要选择全部属性名中包含了second的 h1 元素 h1[class~=second] , ~ 表示包含后面的字符串匹配
h1[class~=second] {
color:pink
}
<h1 class="second 1">我是部分属性值选择器1</h1>
<h1 class="second 2">我是部分属性值选择器2</h1>
<h1 class="second 3">我是部分属性值选择器3</h1>
复制代码
小扩展：当你对class这个属性选择时，你会发现使用类选择器 .second 实现的效果也能够达到上面的效果
上述代码中，咱们写class类名时进行了空格，只有这样才能进行部分属性值匹配， class="second1 与 class="second-1 都没法进行匹配，对于后者的状况，咱们可使用子串匹配属性选择器
- h2.class^="second" ,匹配以属性值second为开头的h2元素
- h2.class$="second" ,匹配以属性值second为结尾的h2元素
- h2.class*="second" ,匹配包含属性值second的h2元素
h2[class^=second] {
color:pink
}
h2[class$=second] {
color:pink
}
h2[class*=second] {
color:pink
}
<h2 class="second-1">我是部分属性值选择器3</h2>
<h2 class="2-second">我是部分属性值选择器4</h2>
<h2 class="1-second-2">我是部分属性值选择器5</h2>
复制代码
部分属性选择器的功能是十分强大的，甚至，甚至只要咱们想的话，h2.class*="s"， 就能够完成对全部属性值为 second 的选择
补充
合并选择
当两个选择器的样式相同时，咱们能够将这两个选择器合并
<style type="text/css">
p, div { ... } <!-- 若是 p & div 设置的样式相同，能够合并在一块儿设置 -->
</style>
<p> p ~ <p>
<div> div ~ </div>
复制代码
子选择器
咱们想要选中某元素下面的子类时，能够用 > 进行选中，可是注意，子选择器只能选择本身的子类，第二级元素，而不能选择第二级别如下的元素。
p > strong {
color: greenyellow; <!-- p 下面的 strong 颜色为 浅绿色 -->
}
<p>
<strong>简明教程</strong>
</p>
复制代码
后代选择器
后代选择器可以选定元素内部好几级如下的元素，只要是元素下面的元素，不管几级，都能选定。这也是它与子类选择器的区别，后代选择器能够选择多级元素，子类选择器只能选择二级元素
div p {
<!-- 选择 p 元素成功-->
}
div strong {
<!-- 选择 strong 元素成功-->
}
<div>
<p><strong>后代选择器</strong></p>
</div>
复制代码
子类过滤器
若是咱们使用子类选择器时，想对子元素进行精确选择的话，可使用子类过滤器，根据条件对子类元素进行过滤
<style type="text/css">
p:first-child { ... } <!-- 选择第一个 p -->
p:nth-child(2) { ... } <!-- 指定选择第几个 p -->
p:last-child { ... } <!-- 选择最后一个 p -->
</style>
<p> p1 ~ </p>
<p> p2 ~ </p>
<p> p3 ~ </p>
复制代码
伪类选择器
伪类选择器：同一个标签，咱们想实现不一样状态让它显示出不同的样式时，就可使用到它，最多见的在于超连接状态的使用。好比div是属于box类，这一点很明确，就是属于box类。可是a属于什么类？不明确。由于须要看用户点击前是什么状态，点击后是什么状态。因此，就叫作“伪类”。
伪类又分为静态伪类和动态伪类
静态伪类
静态伪类只能用于超连接的样式
-
:link 超连接点击以前
-
:visited 连接被访问过以后
动态伪类
动态伪类对于全部标签都适用
- :hover “悬停”：鼠标放到标签上的时候
- :active “激活”： 鼠标点击标签，可是不松手时。
- :focus 是某个标签得到焦点时的样式（好比某个输入框得到焦点）
超连接的四种状态
a标签有4种伪类（即对应四种状态），这四种状态必需要求按顺序排放。以下：
- :link “连接”：超连接点击以前
- :visited “访问过的”：连接被访问过以后
- :hover “悬停”：鼠标放到标签上的时候
- :active “激活”： 鼠标点击标签，可是不松手时。
/*让超连接点击以前是黄色*/
a:link{
color:yellow;
}
/*让超连接点击以后是蓝色*/
a:visited{
color:blue;
}
/*鼠标悬停，放到标签上的时候*/
a:hover{
color:pink;
}
/*鼠标点击连接，可是不松手的时候*/
a:active{
color:black;
复制代码
下面是示例用到的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.head * {
color: red;
}
h3 {
color: blue;
}
h3.one {
color: yellow;
}
.second {
color: burlywood;
}
.first {
color: blue
}
.study {
color: green
}
.first.study {
color: pink
}
#one {
color: blue
}
#two {
color: yellow
}
#three {
color: red
}
a[href] {
color: red
}
a[href="www.baidu.com"] {
color: black
}
h1[class~="second"] {
color:pink
}
h2[class^="second"] {
color:pink
}
h2[class$="second"] {
color:pink
}
h2[class*="second"] {
color:pink
}
</style>
</head>
<body>
<div class="head">
<p>我是 head 1号</p>
<p>我是 head 2号</p>
</div>
<hr>
<div>
<h3>我是元素选择器</h3>
</div>
<hr>
<div>
<h3 class="one">我是单类选择器</h3>
<h3 class="second">我是单类选择器的省略</h3>
</div>
<hr>
<div>
<h4 class="first">我是多类选择器1</h4>
<h4 class="study">我是多类选择器2</h4>
<h4 class="first study">我是多类选择器3</h4>
</div>
<hr>
<div>
<h5 class="first" id="one">我是ID选择器1</h5>
<h5 class="first" id="two">我是ID选择器2</h5>
<h5 class="first" id="three">我是ID选择器3</h5>
</div>
<hr>
<div>
<a href="" title="">www.baidu.com</a> <br>
<a href="www.baidu.com">www.baidu.com</a>
</div>
<hr>
<div>
<h1 class="second 1">我是部分属性值选择器1</h1>
<h1 class="second 2">我是部分属性值选择器2</h1>
<h1 class="second 3">我是部分属性值选择器3</h1>
</div>
<hr>
<div>
<h2 class="second-1">我是部分属性值选择器3</h2>
<h2 class="2-second">我是部分属性值选择器4</h2>
<h2 class="1-second-2">我是部分属性值选择器5</h2>
</div>
</body>
</html>
复制代码
以上，就是各类选择器的认识和了解，下面咱们要开始介绍重头戏也是面试官常问的考点——选择器的优先级了
第三问：选择器的优先级是怎样的？它们是怎么进行计算的？
选择器优先级的认识
咱们在上面聊到了，CSS选择器包括行内样式、id选择器、class选择器、标签选择器。上面几种选择器的优先级优先级依次下降，另外，在选择器中使用!important 可以让选择器的优先级提高。 为何咱们要对选择器引入优先级的概念？试想一下，若是咱们对一个P标签的ID选择器设置了红色，对它的类选择器设置了黄色，对它的元素选择器设置了蓝色，那么P标签的颜色不是要打架吗，因此咱们须要对选择器进行优先级的设置，哪一个优先级更高，就执行哪一个选择器。
为了给选择器进行优先级比较，咱们对每种选择器都分配了权重
- !impotant 权重为正无穷
- 行内样式 权重为 1000
- ID选择器 权重为 100
- 类选择器/伪类选择器/属性选择器 权重为 10
- 标签选择器 权重为 1
- 通配符选择器/子类选择器/兄弟选择器 权重为 0
- 继承的样式没有权重
总结：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
选择器的比较规则
- 权重大的选择器优先于权重小的选择器
- 权重能够进行叠加，如一个main类与一个P标签： .main p {} 这里选择器的权重为11
- 权重相同时，选择后面的选择器，将前面的样式进行覆盖
- 通配符、子选择器、兄弟选择器的权重为 0000，可是它们的权重高于继承样式的权重
下面给出一个例子来更加形象的分析选择器的权重
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { /* 0 */
margin: 0;
padding: 0;
}
.container { /* 类选择器 10 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#study { /* ID选择器 100 */
color: black;
}
.head { /* 类选择器 10 */
color: blue;
}
p { /* 元素选择器 1 */
color: violet;
}
.head p { /* 类选择器 10 + 元素选择器 1 = 11 */
color: orangered;
}
.head p[class="one"] { /* 类选择器 10 + 属性选择器 10 = 20 */
color: saddlebrown;
}
div.head p[class="two"] { /* 元素选择器 1 + 类选择器 10 + 属性选择器 10 = 21 */
color: rgb(47, 218, 123);
}
div.head p[class="three"] { /* 元素选择器 1 + 类选择器 10 + 属性选择器 10 = 21 */
color: rgb(87, 112, 126);
}
div.head p[class="four"] { /* 元素选择器 1 + 类选择器 10 + 属性选择器 10 = 21 */
color: rgb(176, 45, 180);
}
.five { /* !important 无穷大 */
color: rgb(82, 162, 228) !important;
}
</style>
</head>
<body>
<div class="container">
<div class="head" id="top">
<p style="font-size: 20px; color: rgb(9, 87, 48);" id="study">我要开始学习啦！</p>
<p class="one">周一打王者</p>
<p class="two">周二打LOL</p>
<p class="three">周三打吃鸡</p>
<p class="four">周四打原神</p>
<p class="five">周五打阴阳师</p>
<p>周末steam全家桶</p>
</div>
</div>
</body>
</html>
复制代码
分析
咱们从上面能够看出
我要开始学习啦！
它的颜色，被 #study，.head ， p ， .head p 等选择器以及行内样式所选中，因为行内样式的权重为1000，是这里面最高的，因此执行行内样式的颜色
周一打王者
它的颜色，被 #study， .head ， p ， .head p ， .head p[class="one"] 这些选择器所选中，因为 .head p[class="one"] 的权重为20，为最高，执行它的样式。
其余元素同理
补充：不一样选择器之间存在不可逾越的鸿沟，即，11个标签选择器的权重也小于1个类选择器
小结
以上，就是CSS选择器的优先级比较啦，这篇文章大致梳理了什么是CSS选择器，CSS的各类选择器以及各类选择器之间的优先级比较，经过对CSS选择器的初步认识一步一步的深刻优先级比较，帮助你更好的认识CSS选择器，若是以为对你有所帮助的话欢迎点赞，固然，因为本人水平有限，可能文章还存在很多纰漏，但愿发现问题的小伙伴能够在评论区指出
- 1. 看这一篇就够了,css选择器知识汇总
- 2. CSS 选择器，一篇就够了
- 3. python面试看这一篇就够了
- 4. 面试 ConcurrentHashMap ，看这一篇就够了！
- 5. mysql面试看这篇就够了
- 6. 容器看这一篇就够了
- 7. Mysql面试看这篇就够了之脑图篇
- 8. 了解 MongoDB 看这一篇就够了
- 9. RunLoop看这篇就够了
- 10. nginx看这篇就够了
- 更多相关文章...
- • XQuery 选择 和 过滤 - XQuery 教程
- • MySQL选择数据库（MySQL USE语句） - MySQL教程
- • 再有人问你分布式事务，把这篇扔给他
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 看这一篇就够了,css选择器知识汇总
- 2. CSS 选择器，一篇就够了
- 3. python面试看这一篇就够了
- 4. 面试 ConcurrentHashMap ，看这一篇就够了！
- 5. mysql面试看这篇就够了
- 6. 容器看这一篇就够了
- 7. Mysql面试看这篇就够了之脑图篇
- 8. 了解 MongoDB 看这一篇就够了
- 9. RunLoop看这篇就够了
- 10. nginx看这篇就够了