CssFullText

CSS Selector 简介：

CSS 选择器( css selector) 是CSS的灵魂。对于一个HTML页面来说，CSS选择器是方便的元素(element)选取工具。

支持的选择器类型：

• 派生选择器 ( E F)
• id 选择器 ( E#id )
• 类选择器 ( E.class )
• 属性选择器 ( E[attr=val] )

暂时不支持伪类选择器( E:last )。

选择器语法简介：

派生选择器

派生选择器用于根据元素的上下文关系定位元素。
HTML 代码:

1 2 3 4 5 6 7 8 9

<form>   <label>Name:</label>   <input name="name" />   <fieldset>       <label>Newsletter:</label>       <input name="newsletter" /> </fieldset> </form> <input name="none" />

选择器：form input
选择元素：<input name=”name” />, <input name=”newsletter” />

也可以使用子类选择器( E > F )，仅选择元素的子元素，而不会选取其孙子元素
对于以上代码， 选择器：form > input
选择元素：<input name=”name” />

id 选择器

id 选择器用于选取特定id的元素。
HTML 代码:

1 2	<div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div>

选择器：#myDiv
选择元素：<div id=”myDiv”>id=”myDiv”</div>

类选择器

类选择器用于选取拥有特性class的元素。
HTML 代码:

1 2 3

<div class="notMe">div class="notMe"</div> <div class="Me myClass">div class="Me myClass"</div> <span class="myClass">span class="myClass"</span>

选择器：.Me
选择元素：<div class=”Me myClass”>div class=”Me myClass”</div>

属性选择器

选择包含特定属性的元素，不支持在同一个选择器中使用多个属性选择器（ span[hello="Cleveland"][goodbye="Columbus"] ）
[attribute] 包含属性
[attribute=value] 属性等于特定值的元素
[attribute~value] 匹配给定的属性包含特定值的元素
[attribute!value] 匹配给定的属性不包含特定值的元素（not~ ）
[attribute|value] 匹配如”lang”属性中的en, en-US, en-cockney
[attribute^value] 匹配给定的属性以特定值开头的元素
[attribute$value] 匹配给定的属性以特定值结尾的元素
[attribute*value] 匹配给定的属性的值中包含给定的字符串
例子
参见：http://www./TR/CSS2/selector.html#attribute-selectors