CSS 選擇器( css selector) 是CSS的靈魂。對于一個HTML頁面來說,CSS選擇器是方便的元素(element)選取工具。
暫時不支持偽類選擇器( E:last )。
派生選擇器用于根據(jù)元素的上下文關(guān)系定位元素。
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的元素。
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] 匹配給定的屬性以特定值結(jié)尾的元素
[attribute*value] 匹配給定的屬性的值中包含給定的字符串
例子
參見:http://www.w3.org/TR/CSS2/selector.html#attribute-selectors