文档介绍：CSS选择器的深度剖析
李广宏摘要:在“互联网+”的大时代下,CSS样式表对于网站开发发挥着举足轻重的作用。所谓CSS选择器是指属性选择器可以根据元素的属性及属性值来选择元素,也是CSS样式表的核心理念。本文对CSS的选择器CSS选择器的深度剖析
李广宏摘要:在“互联网+”的大时代下,CSS样式表对于网站开发发挥着举足轻重的作用。所谓CSS选择器是指属性选择器可以根据元素的属性及属性值来选择元素,也是CSS样式表的核心理念。本文对CSS的选择器做了详细分析。
关键词:CSS代码;CSS选择器;代码规范;代码优化;web应用

一、标签选择器
标签选择器:标签选择器直接使用html标签作为选择器,是CSS样式表中最常见而且最基本的选择器。
如:p{color:red;} 或者 li{color:red;}
二、类选择器
类选择器是以一种独立于文档元素的方式来指定样式,同时在使用类选择器之前需要在html元素上定义类名。
如:HTML:<div class=’main’></div> CSS:.main{color:red;}
三、ID选择器
ID选择器类似于类选择器,也需要在html页面定义id 名。但是二者还是有很大区别的。
,类选择器是以点“.”开头,而ID选择器是以“#”开头,如#main{}
,类名可以在同一个html中多次出现,而ID选择器在同一个html中只能出现一次。
四、CSS属性选择器
CSS属性选择器是指根据元素的属性及属性值来选择元素。属性选择器主要包括以下几种:
[attr]:只使用属性名,但没有确定任何属性值;这个是属性选择器中最简单的一种。
如:.Main a[id]{color:red;},其含义为,。
[attr="value"]:指定属性名,并指定了该属性的属性值,从而缩小了选择的范围,更精确的找到目标元素。
[attr~="value"]:指定属性名,并且具有属性值,在html中此属性的属性值可以是多个值,并且以空格隔开,同时包含了一个所定义的属性值value,那么就可以进行匹配;
[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
[attr$="value"]:指定了屬性名,并且有属性值,而且属性值是以value结束的;
[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含子串"value"的所有元素;
[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值。
五、CSS后代选择器
CSS后代选择器又称为包含选择器,是指选择某元素后代的元素。
如:h1 span{} 基本的语法我们可以理解为,h1标签下所有span 元素应用该样式。
但是如:CSS div#divBox p {color:red;} 浏览器判断的顺序为是否有class=’r