2011-02-11

CssFullText - CSS选择器说明

CSS Selector 简介：

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

支持的选择器类型：

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

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

选择器语法简介：

派生选择器

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

<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 代码:

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

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

类选择器

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

<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] 属性等于特定值的元素
[attributevalue] 匹配给定的属性包含特定值的元素
[attribute!value] 匹配给定的属性不包含特定值的元素（not ）
[attribute|value] 匹配如”lang”属性中的en, en-US, en-cockney
[attribute^value] 匹配给定的属性以特定值开头的元素
[attribute$value] 匹配给定的属性以特定值结尾的元素
[attribute*value] 匹配给定的属性的值中包含给定的字符串
例子
参见：http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Binuxの杂货铺