CSS选择器的深度剖析

摘 要：在“互联网+”的大时代下，CSS样式表对于网站开发发挥着举足轻重的作用。所谓CSS选择器是指属性选择器可以根据元素的属性及属性值来选择元素，也是CSS样式表的核心理念。本文对CSS的选择器做了详细分析。

关键词：CSS代码;CSS选择器;代码规范;代码优化;web应用

一、标签选择器

标签选择器：标签选择器直接使用html标签作为选择器，是CSS样式表中最常见而且最基本的选择器。

如：p{color：red;} 或者 li{color：red;}

二、类选择器

类选择器是以一种独立于文档元素的方式来指定样式，同时在使用类选择器之前需要在html元素上定义类名。

如：HTML：

CSS：.main{color：red;}

三、ID选择器

ID选择器类似于类选择器，也需要在html页面定义id 名。但是二者还是有很大区别的。

a.开头符号不同，类选择器是以点“.”开头，而ID选择器是以“#”开头，如#main{}

b.使用次数不同，类名可以在同一个html中多次出现，而ID选择器在同一个html中只能出现一次。

四、CSS属性选择器

CSS属性选择器是指根据元素的属性及属性值来选择元素。属性选择器主要包括以下几种：

a.E[attr]：只使用属性名，但没有确定任何属性值;这个是属性选择器中最简单的一种。

如：.Main a[id]{color：red;}，其含义为，选择了div.Main下所有带有id属性的a元素。

b.E[attr="value"]：指定属性名，并指定了该属性的属性值，从而缩小了选择的范围，更精确的找到目标元素。

c.E[attr～="value"]：指定属性名，并且具有属性值，在html中此属性的属性值可以是多个值，并且以空格隔开，同时包含了一个所定义的属性值value，那么就可以进行匹配;

d.E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的;

e.E[attr$="value"]：指定了屬性名，并且有属性值，而且属性值是以value结束的;

f.E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含子串"value"的所有元素;

g.E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值。

五、CSS后代选择器

CSS后代选择器又称为包含选择器，是指选择某元素后代的元素。

如：h1 span{} 基本的语法我们可以理解为，h1标签下所有span 元素应用该样式。

但是如：CSS div#divBox p span.red{color：red;} 浏览器判断的顺序为是否有class=red的span标签，并且父级标签为p，p标签的父级为id=divBox的div，如果上述条件都能够满足，那么则进行匹配。浏览器之所以这样进行查找是为了尽早过滤掉一些无关的样式规则和元素。

六、子元素选择器

子元素选择器与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

如：CSS h1 span{color：red}

HTML

This is very very important.

This is really very important.

在这个例子里第一个h1标签里的span会匹配应用样式，而第二个h1里的span属于h1的后代元素，所以不会进行匹配。

七、CSS 相邻兄弟选择器

CSS 相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。相邻兄弟选择器使用了加号（+），并且加号两旁要有空白符。

如：HTML

• text 1
• text 2
• text 3

CSS li{ float：left; list-style：none;} li + li { font-weight：bold;}

显示结果为 text 1 text 2text 3

由此可见，上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

八、CSS 伪类

CSS 伪类用于向某些选择器添加特殊的效果。伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式;当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

九、CSS 伪元素

CSS 伪元素用于向某些选择器设置特殊效果。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

十、结语

css选择器用法比较丰富，而且在工作当中一般一个页面需要设置多种的CSS样式，选择器可以更好的适应工作的需要，选择器合理的使用可使得元素定位更加精准、设置特别样式更加方便。

参考文献：

[1]安迪·巴德（Andy Budd）.精通CSS 高级Web标准解决方案（第3版）.人民邮电出版社，2019-02-01.

[2]Eric，A.，Meyer，Estelle，Weyl.CSS权威指南.中国电力出版社，2019-05-01.

[3]Lea Verou.CSS揭秘.人民邮电出版社，2016-04-01.

[4]陆凌牛.HTML 5与CSS 3权威指南.机械工业出版社，2019-03-01.

作者简介：李广宏，男，研究方向：信息化、系统运维、网站开发。