面试题二、css选择器与权重知多少

赵花花5070

已于 2023-02-16 10:13:23 修改

阅读量157

点赞数

分类专栏：面试题汇总 CSS / CSS3 文章标签：面试 css css3

于 2023-01-29 16:47:41 首次发布

本文链接：https://blog.csdn.net/weixin_42728767/article/details/128787034

版权

面试题汇总同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS / CSS3

6 篇文章 1 订阅

订阅专栏

在这里插入图片描述

前言

记录一篇很基础的面试题，这不是面试中随口问的，而是正经的出现在纸质面试题中的一个题，占比分数还不低，足足有5分。

那么今天就根据这个题来聊聊css的选择器和权重相关的知识，讲述方式为看题思考，然后渐渐深入了解，希望能够有所收获。

请看题：

#container input {
    width: 200px;
}

body > #container > input{
    width: 300px;
}

#container input.sameInput[type='text']{
    width: 500px;
}

#container > input[type='text']{
    width: 400px;
}

其实一拿到这个题就能够很明显的感觉到是在考察什么，我相信大家也都明白。

CSS权重！！！

我相信只要是从事过前端工作的大多都知道这个词，但是我还是想再啰嗦两句，为啥呢？

首先是多水两句 @_@
记录一下，防止自己忘掉
给不经意间经过这里且不知道的这个词的同学一些提示，希望能够给到这部分同学一些帮助

整理这篇笔记呢，有些是从其他地方给扒拉来的，

废话不多说，进入正题。

CSS的世界中存在选择器，权重这两个词，那就依次了解一下呗。

一、选择器

基础选择器

通配符选择器

<style>
   		/* 我是选择器 */
       *{}
</style>

ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <style>
   		/* 我是选择器 */
       #container { }
   </style>
</head>
<body>
    <div id="container"></div>
</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <style>
   		/* 我是选择器 */
       .container { }
   </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <style>
   		/* 我是选择器 */
       div{ }
   </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <style>
		/* 我是选择器 */
		a[href]{ }
		
		/* 查找input type为text的元素 */
		input[type=text]{ 
			height: 30px;
		}
		
		/* 查找 class 属性为 boxItem 的元素 */
		/* li[class='boxItem']{ } 或 li[class=boxItem]{ }*/
		li[class=boxItem]{ 
			height: 50px;
			width: 50px;
			background-color: pink;
		}
		
		/* 查找属性值中包含某个值，设置样式 */
		input[class~=myBoxStyle]{
			border-color: red;
		}

		/* 查找以 textStyle 或者 textStyle- 开头的元素 */
		li[class|=textStyle] {
			color: red
		}
   </style>
</head>
<body>
    <a href=""/>
    
    <div>
		<input class="myBoxStyle" type='text' placeholder="11111"/>
		<input class="myBoxStyle_1" type='text' placeholder="2222"/>
		<input class="myBoxStyle-2" type='password' />
		<input class="myBoxStyle aaa" type='number' />
	</div>
	
    <div>
		<input type='checkbox' />
		<input type='radio' />
		<input type='button' />
		<input type='submit' />
		<input type='hidden' />
		<input type='file' />
		<input type='email' />
	</div>
	
	<ul>
		<li class="boxItem">1111</li>
		<li class="boxItem1">1111</li>
		<li class="boxItem2">1111</li>
	</ul>

	<ul>
		<li class="textStyle">1111</li>
		<li class="textStyle1">1111</li>
		<li class="textStyle-1">1111</li>
		<li class="textStyle_1">1111</li>
		<li class="textStyle myCustomStyle">1111</li>
	</ul>
</body>
</html>

组合选择器

后代选择器（作用于类名 .a 下所有的a元素）

.a a{}

子元素选择器（直接作用于类名 .a 元素下的直系后代元素）
通俗的讲：儿子级元素生效，孙子及其后代元素不生效

.a > a{}

交集选择器(同时具备这几个类名的元素)

.a.b.c{}

并集选择器（只要元素上存在这几个类名中的一个，这个样式都生效）

.a,
.b,
.c{}

相邻兄弟选择器（用的不多）

div + p{}

通用兄弟选择器（用的不多）

div~p{}

伪类和伪元素选择器

伪元素选择器

::before 再某个元素之前插入内容
::after 在某个元素之后插入内容
::first-line 为元素的第一行使用样式
::first-letter 为某个元素的首字母或第一个文字使用样式
::selection 对光标选中的元素添加样式（用的不多）

标记状态的伪类选择器
- :hover 选取鼠标悬浮的元素
- :active 选取点中的元素
- :focus 获取焦点的元素
- ::link 选取为访问过的超链接（用的不多）
- ::visited 选取访问过的连接（用的不多）
筛选功能的伪类选择器
- :first-child 选取当前选择器下的第一个元素
- :last-child 选取当前选择器下的最后一个元素
- :nth-child(n) 选取第几个元素，这地方可以设置奇数（odd）偶数（even）
- :nth-last-child(n) 与上面的基本差不多，只不过是倒着来（用的不多）
- :checked 选取勾选状态下的input元素，只对radio和checkbox有效
- :only-child 获取只有唯一子元素的元素（用的不多）
- :empty 选取没有子元素的元素
- :disabled 选取禁用的表单元素
- :only-of-type 获取只有唯一元素的类型（用的不多）

二、权重

权重的概念

一般在我们进行网页布局美化的时候，css的每一条规则的权重是导致界面最终呈现的主要因素，所以这种基本的规则还是需要了解一下的。
CSS权重就是在css在使用的过程中，如何将这个规则占据更大的分值，有了分值，就有了大小，然后就可以进行对比及排序，大分值覆盖小的分值（大鱼吃小鱼），然后界面上展现的是当前元素所能够应用的所有规则中分值最大的那一条规则。

权重的等级

在css中不同的选择器具有不同的权重登记，主要有以下几类

内联样式
id选择器
类，伪类，属性选择器
元素，伪元素选择器

权重的计算

css权重等级比较标准的一套说法是：

!important > 内联样式 > ID > 类、伪类、属性 > 元素、伪元素 > 继承 > 通配符
在这里插入图片描述

!important: 无穷大
内联样式: 1000
ID: 100
类、伪类、属性: 10
元素、伪元素: 1
通配符: 0

将css中使用到的每一条规则都依次对应加上对应的分值，然后就可以计算出当前规则的总分值，也就是权重。
需要注意的是，这仅仅是一种便于理解的方式方法。
权重大的生效，权重一致的，后面的覆盖前面的，后面的生效。

那么此时再来看这个题，也就不难理解了。

<!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>
    	/* ID选择器，元素选择器   100 + 1 */
        #container input {
            width: 200px;
        }

		/* 元素选择器， ID选择器，元素选择器   1 + 100 + 1 */
        body > #container > input{
            width: 300px;
        }

		/* ID选择器，元素选择器，属性选择器   100 + 1 + 10 */
        #container input.sameInput[type='text']{
            width: 500px;
        }
		
		/* ID选择器，属性选择器   100 + 10 */
        #container > input[type='text']{
            width: 400px;
        }
    </style>
</head>
<body>
    <div id="container">
        <input class="sameInput" type="text">
    </div>
</body>
</html>