CSS选择器-优先级-性能

首先说下曾经踩过的坑,p:nth-child(1) 匹配的是任何元素的第一子元素p ,(之前把它理解成p下的一个元素)

p:nth-of-type(1) 匹配的是任何元素的所有子元素的第一个p

<div>
    <p>3</p>
    <span>4</span>
    <p>5</p>
    <span>6</span>
</div>

p:nth-child(1) 匹配3，如果要匹配第一span 只能是 span:nth-of-type

谈到CSS选择器可能大家最熟悉与常用的就是标签、id、class选择器了，从效率上来说它们三个无疑最高的选择，我们确实也应优先使用，但在实际开发中，我们可能还有一些友好的选择器，下面列举一些常用css选择器（注意只包括常用有代表性的选择器，部分少用的未列举）：

1、基本选择器，效率最高; id 、class、标签、* 通用选择器

2、组合选择器，效率相对来基本选择器来说较低，‘h1,p多类’、‘div p后代’、‘div>p子’、‘div~p 同级’、‘div+p相邻（div同级的后一个元素）’选择器

3、属性选择器，效率相对来说又低一层，E[arr]、E[att^=”val”]、E[att$=”val”]、E[att*=”val”]

4、伪类选择器，效率最低，:hover :active :focus :first-child :checked :enabled :nth-child(n) :nth-of-type(n)

(E:after E:before E:first-letter E:first-line伪元素）

选择器优性能及优化详见：http://blog.sina.com.cn/s/blog_60bbe8e901011veg.html ,里面写得相当详细(包括CSS解析 )，感谢博主！！！

下面着重介绍选择器优先级，我们都是站在巨人的肩膀上做了一些自己的见解，帮助大家更好的理解它

之前看了网上的其它一些博客，感觉讲得都很繁琐，计算什么权重，感觉都挺官方的，我在这里介绍一些常见的、通俗易懂的方法，

<div class="min-screen" id="test" data-index="tt"></div>

优先级行内style>id>class>标签，这是网上博客中一些比较常见的

1、important，大家都知道它的优先级最高，但我在class和id选择器中都设置它，则浏览器会使用哪个呢（答案是 id），在important存在的情况下，它会跳过important，从优先级表从下往下比，找到class与id 并比较优先级

2、

div{    background-color: red;
}

body div{background:black;
}

背景色是black

3、

.min-screen{background-color: green;
}
#test{background: blue;
}
div[data-index='tt']{background:yellow;
}

显示yellow

4、

.min-screen{background-color: green;
}
div[data-index='tt']{background:yellow;
}
div:nth-child(1){background:palegreen;
}

显示palegreen，当加上 #test{background: blue;} ，则显示blue

5、

.min-screen{background-color: green;
}
#test{background: blue;
}
.min-screen:hover{background:pink ;
}

当鼠标移动到div上的时候并不会显示 pink（因为id比class优先级更高），当改为#test:hover{background:pink ;} 时候则会显示pink

还有很多组合，和一些其它情况，在这里我把一些常用的列举出来，感兴趣的可以自己组合选择器再研究

div{width:200px;
    height:200px;
    background-color: red;
}
.min-screen{background-color: green;
}
#test{background: blue;
}div[data-index='tt']{background:yellow;
}
div:hover{background:pink ;
}
div:nth-child(1){background:palegreen;
}
div:last-child{background:#f0ad4e;
 }
body div{background:black;
}
*{background:violet;
}
p:nth-of-type(1){color:red;
}

总结:

1、优先级：important>行内style>id>结构性伪类（eg :nth-child() ：nth-of-type()）>属性>类>标签>通用

2、伪类：hover它的优先级还和最前面的关键字有关（会先比较关键字优先级），上面第五点有详细说明

3、精确匹配优先级更高，上面第二点有说明

4、important凌驾于一切之上（尽量少使用），当两个选择器都存在它时，则比较选择第下个优先级高的，上面第一点有说明

5、动态编写css,在.css文件中所有的属性都无法传参编写，可在html 的head中建立style标签，通过js动态编写style中的样式

CSS选择器-优先级-性能相关推荐

如何提升 CSS 选择器的性能？
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配的机制, 如子选择器规则: # ...
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选择器优先级问题(选择器的权重图) A.为啥有此问题的产生? a.众所周知,css对于同一属性先进行优先级别的判断,若比之前渲染的优先级别高,那么就会渲染成这个优先级别较高的. b.对于单一的选 ...
css选择器优先级及,CSS选择器优先级（转）
1. 引言上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一 ...

CSS选择器-优先级-性能

CSS选择器-优先级-性能相关推荐

最新文章

热门文章