CSS中的挑选器类型总结及高效率较为

2021-01-20 05:58 jianzhan

大家都了解,CSS具备叠加性(同1个元素被好几条款式标准特定),承继性(子孙后代元素会承继老前辈元素的1些款式和特性)和优先选择级 (因为CSS的叠加性和承继性,将造成优先选择级,这指的是哪条款式标准会最后功效于特定的元素,他只遵照1条标准,特定的越实际,优先选择级越高)

由上可知,挑选器特定的越实际,那末他的优先选择级就越高,

在这里,大家来总结1下css的挑选器:

1、基础挑选器(标识挑选器、通用性挑选器、类和ID挑选器)

挑选器 叙述 CSS版本号 E 标识挑选器,配对全部应用E标识的元素 * 通用性元素挑选器,配对任何元素 .info class挑选器,配对全部class特性中包括info的元素 #footer id挑选器,配对全部id特性等于footer的元素


2、多元化素的组成挑选器(标识挑选器[群组挑选器]、子孙后代挑选器、子元素挑选器、邻近挑选器)

挑选器 叙述 CSS版本号 E,F 多元化素挑选器,另外配对全部E元素或F元素,E和F之间用逗号分隔 E F 包括挑选符,配对全部被E元素包括的F元素 E>F 子元素挑选器,配对全部E元素的儿子元素F E+F 紧邻元素挑选器,配对全部紧随E元素以后的同级元素F E~F 配对任何E标识以后的同级F标识


3、特性挑选器

挑选器 叙述 CSS版本号 E[attribute] 配对全部具备attribute特性的E元素,不考虑到它的值。(留意:E在此处能够省略,例如“[cheacked]”。下列同。) 2.1 E[attribute=value] 配对全部attribute特性等于“value”的E元素 2.1 E[attribute~=value] 配对全部attribute特性具备好几个空格隔开的值、在其中1个值等于“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


4、伪类挑选器

5、伪元素挑选器

挑选器 叙述 CSS版本号 E:first-line 配对全部E标识内的第1行 2.1 E:first-letter 配对全部E标识内的第1个字母 2.1 E:before 在E标识以前插进转化成的內容 2.1 E:after 在E标识以后插进转化成的內容 2.1


在这里,大家必须了解的是访问器是怎样载入挑选器的。Chris Coyier曾在《Efficiently Rendering CSS》1文中说过“访问器载入你的挑选器,遵照的标准是从挑选器的右侧到左侧载入。换句话说,访问器载入挑选器的次序是由右到左开展”。

挑选器的最终1一部分,也便是挑选器的最右侧(在这个事例中便是a[title]一部分)一部分被称为“重要挑选器”,它将决策你的挑选器的高效率怎样?是高還是低。

那末怎样让重要挑选器更合理,特性化更高呢?实际上很简易,关键掌握1点“越实际的重要挑选器,其特性越高”

挑选器有1个固有的高效率,大家看来Steve Souders给排的1个次序:

                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)
上面9种挑选器的高效率是从高到低排下来的,基中ID挑选器的高效率是最高,而伪类挑选器的高效率则是最低的。

大家来比照1下这几个案例,看看谁的高效率是最高的:

1.  #myId span
2.  span #myId
由上面的事例,大家能够了解,下面的高效率要比上面的高。由于最右侧的重要挑选器是最实际的,也合乎上述的挑选器优先选择级次序。