文档介绍：CSS选择器的深度剖析
李广宏摘要:在“互联网+”的大时代下,CSS样式表对于网站开发发挥着举足轻重的作用。所谓CSS选择器是指属性选择器可以根据元素的属性及属性值来选择元素,也是CSS样式表的核心理念。本文对CSS的选择器做了详细分析。CSS选择器的深度剖析
李广宏摘要:在“互联网+”的大时代下,CSS样式表对于网站开发发挥着举足轻重的作用。所谓CSS选择器是指属性选择器可以根据元素的属性及属性值来选择元素,也是CSS样式表的核心理念。本文对CSS的选择器做了详细分析。
关键词:CSS代码;CSS选择器;代码规范;代码优化;web应用
一、标签选择器
标签选择器:标签选择器直接使用html标签作为选择器,是CSS样式表中最常见而且最基本的选择器。
如:p{color:red;}或者li{color:red;}
二、类选择器
类选择器是以一种独立于文档元素的方式来指定样式,同时在使用类选择器之前需要在html元素上定义类名。
如:HTML:<divclass=’main’></div>CSS:.main{color:red;}
三、ID选择器
ID选择器类似于类选择器,也需要在html页面定义id名。但是二者还是有很大区别的。
,类选择器是以点“.”开头,而ID选择器是以“#”开头,如#main{}
,类名可以在同一个html中多次出现,而ID选择器在同一个html中只能出现一次。
四、CSS属性选择器
CSS属性选择器是指根据元素的属性及属性值来选择元素。属性选择器主要包括以下几种:
[attr]:只使用属性名,但没有确定任何属性值;这个是属性选择器中最简单的一种。
如:.Maina[id]{color:red;},其含义为,。
[attr="value"]:指定属性名,并指定了该属性的属性值,从而缩小了选择的范围,更精确的找到目标元素。
[attr~="value"]:指定属性名,并且具有属性值,在html中此属性的属性值可以是多个值,并且以空格隔开,同时包含了一个所定义的属性值value,那么就可以进行匹配;
[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
[attr$="value"]:指定了屬性名,并且有属性值,而且属性值是以value结束的;
[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含子串"value"的所有元素;
[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值。
五、CSS后代选择器
CSS后代选择器又称为包含选择器,是指选择某元素后代的元素。
如:h1span{}基本的语法我们可以理解为,h1标签下所有span元素应用该样式。
但是如:CSSdiv#{color:red;}浏览器判断的顺序为是否有class=’red’的span标签,并且父级标签为p,p标签的父级为id=’divBox’的div,如果上述条件都能够满足,那么则进行匹配。浏览器之所以这样进行查找是为了尽早过滤掉一些无关的样式规则和元素。
六、