CSS选择器

根据之前提过的特殊性来分配,对于以下文档

<div id=“div">

<a id="link1" class="class1">link1</a>

<a id="link2" class="class2">link2</a>

<a id="link3" class="class3">link3</a>

</div>

首先，要说的就是特殊性加0,1,0,0的ID选择器：

所谓ID选择器，是根据在css文档中的ID=“值”进行选择，使用“ # ”。

比如有#div{color:red;}

其次，是特殊性加0,0,1,0的类选择器，属性选择器以及伪类选择器。

类选择，即对文档中的class=”值“进行选择，使用” . "。

比如有 .class1{color:red}

属性选择，即对文档中的属性进行选择，使用“ [ ] "。

比如有 div[id]{color:red}

伪类选择，即对文档中的各种状态进行选择，使用” ：“。

比如有 :hover{color:red}

再者，是特殊性加0,0,0,1的元素选择和伪元素选择器。

元素选择，即对文档中的标签元素进行选择，

比如有 div{color：red；}

伪元素选择，即对文档中假象的元素进行选择，

比如有 a:first-letter{color:red}

最后，是特殊性加0,0,0,0的通配选择器和结合符

通配选择器是” * “，结合符包括有空格和逗号或者">"或者“ + ”。

具体需要讨论的有如下

结合符：

1、选择器分组，使用逗号，如：h2,p{color:red}表示对于h2和p元素同样使用一个规则。

2、后代选择器，使用空格，如：h2 p{color:red}表示h2的子孙元素中的所有的p元素的文本为红色

3、子元素，使用” >",如：h2 > p{color:red;}表示h2 的子元素p的文本为红色。

4、相邻兄弟选择，使用“ + ”，如h2 + p{color:red} 表示紧接在h2后面的p元素为红色。

警告：IE6之前不支持子选择和相邻兄弟选择。

伪元素

某元素的伪元素，比如p:first-letter表示p元素文本下的第一个字母，伪元素一定是放在选择器的最后：有如下：first-leter  ：first-line   ：before    ：after

类选择器：

一个元素可以有多个类，类值用空格隔开，比如<p class="red warning"></p>

那么 .red{ color:red;} 和 .waring{color:red}都可以让p文字变红。

属性选择器：

1、简单属性选择：只包含属性名，如：p [id]

2、具体属性选择：包含属性名和该属性完整的值，如对于<p class="red warning"></p>，

那么一定要写成 p[class="red warning"],里面的值完全匹配。

3、部分属性值选择：当属性值中间出现空格分隔时，可以用” ~ “来选择其中的一个词，

如：p[class~=["warning"],

还有字串选择，[name^="bar"][name$="bar"][name*="bar"]分别表示以bar开头，结尾，包含bar的name值，

警告：字串选择只有Safari，基于Gecko的浏览器，Opera和IE7支持。

4、特定属性选择，一般用于匹配语言值，如*[lang|=”en“]表示匹配lang属性等于en或者以en-开头的所有元素

如：<h1 lang="en">或者<h1 lang="en-us">

伪类选择器：

1、链接伪类，只适用于<a> :link 和 :visited

2、动态伪类，不只适用于<a> :focus 、:hover 、 :active

警告：IE6之前只允许动态伪类选择超链接，而不允许选择其他元素。IE7支持对所有元素适用 :hover，但不支持对表单元素应用:focus

3、作为第一个子元素，p:first-child表示作为某元素第一个子元素的p元素

警告：IE6之前不支持 :first-child，不过IE7支持

4、根据语言选择，*:lang(em)

可以结合伪类：如a:link:hover{color：red}

警告：IE6不支持伪类结合，IE7支持。