您现在的位置是：网站首页> 编程资料编程资料

CSS中的选择器种类总结及效率比较CSS 设置技巧(单位和值与样式设置技巧)CSS3制作精致的照片墙特效CSS3轻松实现清新 Loading 效果的简单实例CSS 高级技巧总结(必看)浅谈CSS样式之背景、文本

2021-09-05 1086人已围观

简介 这篇文章主要介绍了CSS中的选择器种类总结及效率比较,包括伪类选择器和伪元素选择器等,需要的朋友可以参考下

我们都知道，CSS具有叠加性（同一个元素被多条样式规则指定），继承性（后代元素会继承前辈元素的一些样式和属性）和优先级 （由于CSS的叠加性和继承性，将产生优先级，这指的是哪条样式规则会最终作用于指定的元素，他只遵循一条规则，指定的越具体，优先级越高）

由上可知，选择器指定的越具体，那么他的优先级就越高，

在这里，我们来总结一下css的选择器：

一、基本选择器（标签选择器、通用选择器、类和ID选择器）

选择器描述CSS版本
E标签选择器，匹配所有使用E标签的元素
*通用元素选择器，匹配任何元素
.infoclass选择器，匹配所有class属性中包含info的元素
#footerid选择器，匹配所有id属性等于footer的元素


二、多元素的组合选择器（标签选择器[群组选择器]、后代选择器、子元素选择器、相邻选择器）

选择器描述CSS版本
E，F多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号隔开
E F包含选择符，匹配所有被E元素包含的F元素
E>F子元素选择器，匹配所有E元素的儿子元素F
E+F毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E~F匹配任何E标签之后的同级F标签


三、属性选择器

选择器描述CSS版本
E[attribute]匹配所有具有attribute属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）2.1
E[attribute=value]匹配所有attribute属性等于“value”的E元素2.1
E[attribute~=value]匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素2.1
E[attribute^=value]匹配任何E标签之后的同级F标签2.1
E[attribute$=value]匹配所有attribute属性值包含有“value”的E元素3
E[attribute*=value]匹配所有attribute属性值是以"value"结束的E元素3


四、伪类选择器
201666120340174.jpg (800×647)

五、伪元素选择器

选择器描述CSS版本
E:first-line匹配所有E标签内的第一行2.1
E:first-letter匹配所有E标签内的第一个字母2.1
E:before在E标签之前插入生成的内容2.1
E:after在E标签之后插入生成的内容2.1


在这里，我们需要知道的是浏览器是如何读取选择器的。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行”。

选择器的最后一部分，也就是选择器的最右边（在这个例子中就是a[title]部分）部分被称为“关键选择器”，它将决定你的选择器的效率如何？是高还是低。

那么如何让关键选择器更有效，性能化更高呢？其实很简单，主要把握一点“越具体的关键选择器，其性能越高”

选择器有一个固有的效率，我们来看Steve Souders给排的一个顺序：

                1.id选择器（#myid）
                2.类选择器（.myclassname）
                3.标签选择器（div,h1,p）
                4.相邻选择器（h1+p）
                5.子选择器（ul > li）
                6.后代选择器（li a）
                7.通配符选择器（*）
                8.属性选择器（a[rel="external"]）
                9.伪类选择器（a:hover,li:nth-child）
上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最低的。

我们来对比一下这几个实例，看看谁的效率是最高的：

1.  #myId span
2.  span #myId
由上面的例子，我们可以知道，下面的效率要比上面的高。因为最右边的关键选择器是最具体的，也符合上述的选择器优先级顺序。
201666120415986.jpg (707×447)

上一篇：纯CSS实现鼠标悬停显示图片效果的实例分享CSS中的选择器种类总结及效率比较浅谈css清除浮动(clearfix和clear)的用法彻底掌握CSS中的percentage百分比值使用CSS z-index 层级关系优先级的概念CSS中的line-height行高属性学习教程CSS 高级技巧总结(必看)

下一篇：总结CSS中字符编码声明使用中的一些注意点深入理解CSS中的盒子模型CSS移动优先的12列响应式网格系统特效源码CSS3实用方法总结(推荐)CSS中的各种选择器与样式优先级小结使用CSS3的rem属性制作响应式页面布局的要点解析CSS中的字体大小设置属性总结CSS3弹性盒模型flex box快速入门心得(必看篇)轻松掌握CSS3中的字体大小单位rem的使用方法深入理解css中的align-content属性

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网