CSS选择器优先级 12.28

时隔2个星期，失踪人口回归了！从28号开始，要重新更新博客了！上个星期太沉迷于scss，做了很多很有意思的动画，之后也会考虑上传到博客上的。那么首先我们回到最最最爱的css，这个面试题其实蛮经典的，尽管我们在开发中对于css的继承已经非常熟悉，但是，总归还是要系统归纳总结，以免掏不出点东西来，或者说知道却不能很好的表达出来！！！！
本篇参考菜鸟教程

CSS 样式优先级

要知道所有一切的优先级原则都是基于css样式的继承性

接下来来看栗子啦(1,2咱们一起讲，虽然也没啥好讲的，这两个都是最基本的)
CSS 优先规则1：最近的祖先样式比其他祖先样式优先级高。
CSS 优先规则2："直接样式"比"祖先样式"优先级高。

选择器的优先级
上面讨论了一个标签从祖先继承来的属性，现在讨论标签自有的属性。在讨论 CSS 优先级之前，先说说 CSS 7 种基础的选择器：

ID 选择器，如 #id{}

类选择器，如 .class{}

属性选择器，如 a[href=“segmentfault.com”]{}，例如*[title] {color:red;}【把所有title的字体颜色变为红色】

伪类选择器，如 :hover{}

伪元素选择器，如 ::before{}

标签选择器，如 span{}

通配选择器，如 *{}

CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

看上去很复杂，但是仔细想一下，第一档，内联样式是老大，这毫无争议。第二档，id选择器，可以这么去思考，为啥id选择器大于类选择器，我们通常用class选择器去描述一组元素，但id选择器是用来描述特定元素的样式。第3档，class,:hover,以及属性选择器，第四档，标签选择器【这个我想大家都深有体会，我以前经常设置span的样式结果发现都不生效】以及伪元素选择器::before，
这里就要讲一下伪类和伪元素的区别
伪类是描述存在于dom树中已存在元素的一种状态，例如我用:hover，当我鼠标悬停在元素上，让他的背景颜色改为红色，我也可以用:first-child改变元素内第一个子元素，但是伪元素不同，他是逍遥法外的贼子，不在dom树中。

CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
规则4其实就很简单了，就是加权按顺序比大小，来个栗子

这个想都不用想，可定是红色了。

CSS选择器优先级 12.28相关推荐

css选择器优先级问题
css选择器优先级问题(选择器的权重图) A.为啥有此问题的产生? a.众所周知,css对于同一属性先进行优先级别的判断,若比之前渲染的优先级别高,那么就会渲染成这个优先级别较高的. b.对于单一的选 ...
CSS 选择器优先级与效率优化
CSS选择器优先级与效率优化 Date: 7th of Aug, 2015 Author: HaoyCn 本文收集网上各处关于CSS选择器的文章总结,并自己归纳一篇. 各类选择器的优先级 import ...
谁动了我的选择器？深入理解CSS选择器优先级
深入理解CSS选择器优先级
css选择器优先级和photoshop快捷键以及100度享乐网框架
css选择器优先级 CSS选择器的优先级:作用的元素一样,样式一样,就会有优先级问题,当优先级相同时,一旦发生重叠,以样式后面为主 CSS选择器:统配选择器,类选择器,标签选择器,id选择器,后代选择 ...
html5选择器优先级,css选择器优先级怎么比较
css选择器优先级怎么比较 CSS选择器中比较常见的有标签选择器.ID选择器.类选择器以及子选择器.而事实上,CSS选择器如果细分下来,竟然多达40多种.那他们的优先级该怎么比较呢,下面就来看看吧. ...
css选择器优先级深入理解
css基础选择器有标签选择器.类选择器.id选择器.通用选择器,本文将深入介绍css选择器优先级,这会给正在解决优先级问题的朋友,带来些许帮助一.基础选择器 css基础选择器有标签选择器.类选择器 ...
css选择器优先级顺序是什么？css基本选择器优先级的介绍
css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容. 打造全网we ...
css选择器优先级及,CSS选择器优先级（转）
1. 引言上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一 ...
CSS选择器优先级详解
1. 优先级分级按照优先级从高到低排列: 1. ! important .foo{color:red !important } !important是顶级优先级,唯一推荐使用它的场景为忽略JS脚本设 ...

CSS选择器优先级 12.28

CSS 样式优先级

CSS选择器优先级 12.28相关推荐

最新文章

热门文章