CSS选择器的深度剖析.docxVIP

CSS选择器的深度剖析 　　摘要：在“互联网+”的大时代下，css样式表对于网站开发发挥着举足轻重的作用。所谓css选择器是指属性选择器可以根据元素的属性及属性值来选择元素，也是css样式表的核心理念。本文对css的选择器做了详细分析。 　　关键词：css代码;css选择器;代码规范;代码优化;web应用 　　 　　一、标签选择器 　　标签选择器：标签选择器直接使用html标签作为选择器，是css样式表中最常见而且最基本的选择器。 　　如：p{color：red;}或者li{color：red;} 　　二、类选择器 　　类选择器是以一种独立于文档元素的方式来指定样式，同时在使用类选择器之前需要在html元素上定义类名。 　　如：html：divclass=’main’/divcss：.main{color：red;} 　　三、id选择器 　　id选择器类似于类选择器，也需要在html页面定义id名。但是二者还是有很大区别的。 　　a.开头符号不同，类选择器是以点“.”开头，而id选择器是以“#”开头，如#main{} 　　b.使用次数不同，类名可以在同一个html中多次出现，而id选择器在同一个html中只能出现一次。 　　四、css属性选择器 　　css属性选择器是指根据元素的属性及属性值来选择元素。属性选择器主要包括以下几种： 　　a.e[attr]：只使用属性名，但没有确定任何属性值;这个是属性选择器中最简单的一种。 　　如：.maina[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后代选择器又称为包含选择器，是指选择某元素后代的元素。 　　如：h1span{}基本的语法我们可以理解为，h1标签下所有span元素应用该样式。 　　但是如：cssdiv#divboxpspan.red{color：red;}浏览器判断的顺序为是否有class=’red’的span标签，并且父级标签为p，p标签的父级为id=’divbox’的div，如果上述条件都能够满足，那么则进行匹配。浏览器之所以这样进行查找是为了尽早过滤掉一些无关的样式规则和元素。 　　六、子元素选择器 　　子元素选择器与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。 　　如：cssh1span{color：red} 　　htmlh1thisisspanvery/spanspanvery/spanimportant./h1 　　h1thisisemreallyspanvery/span/emimportant./h1 　　在这个例子里第一个h1标签里的span会匹配应用样式，而第二个h1里的span属于h1的后代元素，所以不会进行匹配。 　　七、css相邻兄弟选择器 　　css相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。相邻兄弟选择器使用了加号（+），并且加号两旁要有空白符。 　　如：htmldivullitext1/lilitext2/lilitext3/li/ul/div 　　cssli{float：left;list-style：none;}li+li{font-weight：bold;} 　　显示结果为text1text2text3 　　由此可见，上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。 　　八、css伪类 　　css伪类用于向某些选择器添加特殊的效果。伪类选择元素基于的是当前元素处