CSS选择器的深度剖析
来源：独旅网
科技创新DON 10.19392/j. cnki. 1671-7341.201928009科技风 2019 年 10 月css选择器的深度剖析李广宏大连东北财经大学辽宁大连116023摘要:在“互联网+”的大时代下，css样式表对于网站开发发挥着举足轻重的作用。所谓CSS选择器是指属性选择器可以
根据元素的属性及属性值来选择元素，也是CSS样式表的核心理念。本文对CSS的选择器做了详细分析。关键词：CSS代码；CSS选择器；代码规范；代码优化;web应用一、 标签选择器标签选择器:标签选择器直接使用html标签作为选择器， 是CSS样式表中最常见而且最基本的选择器。女口： p / colfo: red ； } 或者 li / color: red ； }二、 类选择器类选择器是以一种独立于文档元素的方式来指定样式，同 时在使用类选择器之前需要在html元素上定义类名#女口 : HTML: < div cl:s 二'main ' >
CSS:. main/ ccloo: red; }三、 ID选择器ID选择器类似于类选择器，也需要在html页面定义V名# 但是二者还是有很大区别的#a. 开头符号不同，类选择器是以点开头，而ID选择器 是以“#”开头，如#m:n/0b. 使用次数不同，类名可以在同一个html中多次岀现，而 ID选择器在同一个html中只能岀现一次。四、 CSS属性选择器CSS属性选择器是指根据元素的属性及属性值来选择元 素#属性选择器主要包括以下几种：a. E[ am]:只使用属性名，但没有确定任何属性值）这个是 属性选择器中最简单的一种#如:.Main a $ id] / coloo: red; 0，其含义为，选择了 div. Main 下所有带有id属性的a元素#b. E$ atr=\" value\"]:指定属性名，并指定了该属性的属性 值，从而缩小了选择的范围,更精确的找到目标元素#c. E$ am〜二” value\"]:指定属性名，并且具有属性值，在 html中此属性的属性值可以是多个值，并且以空格隔开，同时 包含了一个所定义的属性值value，那么就可以进行匹配；d. E$ ato\" = \" value\"]:指定了属性名，并且有属性值，属性 值是以value开头的；e. E[ Hr $ =\" value\"]:指定了属性名，并且有属性值，而且 属性值是以value结束的；f. E$ atm* =\" value\"]:指定了属性名，并且有属性值，而且 属值中包含子串” value”的所有元素；g. E$ ltoI二” value\"]:指定了属性名，并且属性值是value 或者以“ value--开头的值#五、 CSS后代选择器CSS后代选择器又称为包含选择器，是指选择某元素后代 的元素。女如:hl span） 0基本的语法我们可以理解为，h1标签下所 有span元素应用该样式#但是如：CSS div#divBox p span. red / color: red; 0 浏览器判 断的顺序为是否有class =* red*的span标签，并且父级标签为 p，p标签的父级为id= * diBlx*的div，如果上述条件都能够满 足，那么则进行匹配#浏览器之所以这样进行查找是为了尽早 过滤掉一些无关的样式规则和元素#六、 子元素选择器子元素选择器与后代选择器相比，子元素选择器只能选择 作为某元素子元素的元素#如 : CSS h1 spln） clule: eed010HTML
This is very very important. This is < em > realty < span > very importanm 在这个例子里第一个h1标签里的span会匹配应用样式，而 第二个h1里的span属于h1的后代元素,所以不会进行匹配。七、 CSS相邻兄弟选择器CSS相邻兄弟选择器可选择紧接在另一元素后的元素，且
二者有相同父元素。相邻兄弟选择器使用了加号（+），并且加 号两旁要有空白符。女如 : HTML
CSS > ） float: left; list-stylo: none;} > + > ） font
weight: boll; 0显示结果为text 1 text 2text 3由此可见，上面这个选择器只会把列表中的第二个和第三 个列表项变为粗体。第一个列表项不受影响。八、 CSS伪类CSS伪类用于向某些选择器添加特殊的效果。伪类选择 元素基于的是当前元素处于的状态，或者说元素当前所具有的 特性,而不是元素的v、cass、属性等静态的标志。由于状态是 动态变化的,所以一个元素达到一个特定状态时，它可能得到 一个伪类的样式；当状态改变时，它又会失去这个样式。由此 可以看出，它的功能和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] Lex Verou. CSS 揭秘.人民邮电出版社,2016-04-01.[4] 陆凌牛.HTML 5与CSS3权威指南.机械工业出版社，
2019-03-01.作者简介：李广宏，男，研究方向：信息化、系统运维、网站
开发。