CSS Selector 簡(jiǎn)介:
CSS 選擇器( css selector) 是CSS的靈魂。對(duì)于一個(gè)HTML頁面來說,,CSS選擇器是方便的元素(element)選取工具,。
支持的選擇器類型:
- 派生選擇器 ( E F)
- id 選擇器 ( E#id )
- 類選擇器 ( E.class )
- 屬性選擇器 ( E[attr=val] )
暫時(shí)不支持偽類選擇器( E:last )。
選擇器語法簡(jiǎn)介:
派生選擇器
派生選擇器用于根據(jù)元素的上下文關(guān)系定位元素,。 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 ),,僅選擇元素的子元素,而不會(huì)選取其孫子元素 對(duì)于以上代碼,, 選擇器: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>
屬性選擇器
選擇包含特定屬性的元素,,不支持在同一個(gè)選擇器中使用多個(gè)屬性選擇器( 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] 匹配給定的屬性以特定值結(jié)尾的元素 [attribute*value] 匹配給定的屬性的值中包含給定的字符串 例子 參見:http://www./TR/CSS2/selector.html#attribute-selectors
|