果在项目里面使用了通用的reset.css样式，但是在具体的页面里面要对同一个样式进行覆盖式修改，不借助与scoped的和inner style，你会怎么做？会不会像我一样在刚接触的时候给要覆盖的样式后面加上!important属性

本文将告诉大家关于CSS选择器和优先级总结，同时告诫大家不能任性使用!important

举个详细点例子，下面这段代码输出的样式是什么样的？以及为什么是你说说的答案？

CSS三大特性—— 继承、 优先级和层叠。

继承：即子类元素继承父类的样式;

优先级：是指不同类别样式的权重比较;

层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

CSS选择符分类

首先来看一下css选择符(css选择器)有哪些?

1.标签选择器(如：body,div,p,ul,li)

2.类选择器(如：class="head",class="head_logo")

3.ID选择器(如：id="name",id="name_txt")

4.全局选择器(如：*号)

5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)

6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)

7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

8.继承选择器(如：div p,注意两选择器用空格键分开)

9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)

10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)

11.子选择器 (如：div>p ,带大于号>)

12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

CSS优先级

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

不同级别

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2. 作为style属性写在元素内的样式
3. id选择器
4. 类选择器
5. 标签选择器
6. 通配符选择器
7. 浏览器自定义或继承

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

同一级别

同一级别中后写的会覆盖先写的样式

上面的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合，像这样

CSS优先级：是由四个级别和各级别的出现次数决定的。

四个级别分别为：

1. 行内选择符
2. ID选择符
3. 类别选择符
4. 元素选择符

优先级的算法：

1. 每个规则对应一个初始"四位数"：0、0、0、0
2. 若是 行内选择符，则加1、0、0、0
3. 若是 ID选择符，则加0、1、0、0
4. 若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
5. 若是 元素选择符/伪元素选择符，则分别加0、0、0、1

算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。

为了更好的理解这些计算规则，举些例子如下：

选择器的解析原则

以前一直认为选择器的定位DOM元素是从左向右的方向，查看了网上的相关资料之后才发现原来自己一直都是错的。郑重的声明选择器定位DOM元素是从右往左的方向，这样的好处是尽早的过滤掉一些无关的样式规则和元素 。具体分析，请看这里

什么？CSS选择器是从右往左解析

简洁、高效的css

所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。

1.不要再ID选择器前使用标签名

解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。

2.不要在类选择器前使用标签名

解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}

3.尽量少使用层级关系；

#divclass p.colclass{color:red;}改为 .colclass{color:red;}

4.使用类选择器代替层级关系

5. 保持CSS的可读性

SS 的伪类选择器和伪元素选择器，让 CSS 有了更为强大的功能。

伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。

有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持下面这两种表示方式。

通常而言，

符合标准而言，单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。

当然，也有例外，对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器或者是移动端页面，建议对于伪元素采用双冒号的写法，如果不得不兼容低版本 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。

伪类选择器 :focus-within

言归正传，今天要说的就是:focus-within 伪类选择器。

它表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点。

这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。

:focus-within 的冒泡性

这个属性有点类似 Javascript 的事件冒泡，从可获焦元素开始一直冒泡到根元素 html，都可以接收触发 :focus-within 事件，类似下面这个简单的例子这样：

就是这样：

这个选择器的存在，让 CSS 有了进一步的让元素持久停留在一种新状态的的能力。

下面几个例子，看看 :focus-within 可以提供什么能力，做些什么事情。

感应用户聚焦区域

它或它的后代获得焦点，这一点使得让感知获焦区域变得更大，所以，最常规的用法就是使用 :focus-within 感应用户操作聚焦区域，高亮提醒。

下面的效果没有任何 JS 代码：

这里是什么意思呢？:focus-within 做了什么呢？

• 我们无须去给获焦的元素设置 :focus 伪类，而是可以给需要的父元素设置，这样当元素获焦时，我可以一并控制它的父元素的样式

核心思想用 CSS 代码表达出来大概是这样：

运用上面思想，我们可以把效果做的更炫一点点，在某些场景制作一些增强用户体验的效果：

TAB导航切换

在之前的一篇文章里，介绍了两种纯 CSS 实现的 TAB 导航栏切换方法：

纯CSS的导航栏Tab切换方案

现在又多了一种方式，利用了 :focus-within 可以在父节点获取元素获得焦点的特性，实现的TAB导航切换：

主要的思路就是通过获焦态来控制其他选择器，以及最重要的是利用了父级的 :not(:focus-within) 来设置默认样式：

配合 :placeholder-shown 伪类实现表单效果

:focus-within 一个人能力有限，通常也会配合其他伪类实现一些不错的效果。这里要再简单介绍的是另外一个有意思的伪类 :placeholder-shown。

• :placeholder-shown：The :placeholder-shown CSS pseudo-class represents any or <textarea> element that is currently displaying placeholder text.
• 另外，划重点，这个伪类是仍处于实验室的方案。也就是未纳入标准，当然我们的目的是探寻有意思的 CSS 。

意思大概就是，当 input 类型标签使用了 placeholder 属性有了默认占位的文字，会触发此伪类样式。配合:not()伪类，可以再改变当默认文字消失后的样式，再配合本文的主角，我们可以实现表单的一系列效果。

CSS 代码大概呈现成这样：

实际效果如下：

可以看到，上面的效果没有用到任何 JS，可以实现：

1. 整个 input（包括父元素所在区域）获焦与非获焦样式控制
2. placeholder 属性设置的文字出现与消失后样式控制

实现离屏导航

这个是其他很多文章都有提到过的一个功能，利用 focus-within 便捷的实现离屏导航，可以说将这个属性的功能发挥的淋漓尽致：

实现掘金登录动效切换

juejin.im是我很喜欢的一个博客网站，它的登录有一个小彩蛋，最上面的熊猫在你输入帐号密码的时候会有不同的状态，效果如下：

利用本文所讲的 focus-within ，可以不借助任何 Javascript，实现这个动效：

兼容性

好了，例子举例的也差不多了，下面到了杀人诛心的兼容性时刻，按照惯例，这种属性大概率是一片红色，看看 CANIUSE，截图日期（2018/08/02），其实也还不算特别惨淡。

原文出处：https://www.cnblogs.com/coco1s/p/9406413.html 作者：ChokCoco

拉选择框

下拉选择框主要用于在有限的空间里设置多个选项。它既可以用作单选，也可以用作复选。代码格式如下。

<select name="..." size="..." multiple>

<option value=".." selected>

...

</option>

...

</selected>

其中size属性定义下拉选择框的函数；name属性定义下拉选择框的名称；multiple属性表示可以多选，如果不设置本属性，那么只能单选；value属性定义选项的值；selected属性表示默认已经选择本选项

（1）编写代码如下图所示，在<body>标签中加入以下代码。

（2）在浏览器中打开文件，预览效果图如下所示，即可看到下拉选择框。其中显示为3行选项，用户可以按住Ctrl键，选择多个选项。

普通按钮

普通按钮用来控制其他定义了处理脚本的处理工作。代码格式如下。

<input type="button" name="..." value="..." onClick="...">

其中type="button"定义按钮，name属性定义普通按钮的名称；value属性定义普通按钮的显示文字；onClick属性定义表单行为，也可以是其他事件，通过指定脚本函数来定义按钮的行为。

（1）编写代码如下图所示，在<body>标签中加入以下代码。

（2）在浏览器中打开文件，预览效果图如下所示，单机【拷贝】按钮即，即可将文本框1中内容复制到文本框2中.