CSS Attribute Selectors
2014-04-28 12:10
281 查看
Attribute Selector
可以对那些拥有指定属性或属性值的HTML元素样式化设置。Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified.
[attribute] Selector
The [attribute] selector 选择凡是拥有这个 attribute 的元素。如下例,选择所以含 target 这个属性的<a>元素a[target] { background-color:yellow; }
[attribute=value] Selector
The [attribute=value] selector 选择那些不仅包含 attribute 的元素,而且该属性值等于value才行。a[target="_blank"] { background-color:yellow; }
[attribute~=value] Selector
The [attribute~=value] selector 选择那些含 attribute 的元素,并且其属性值containing a specified word.如下例,将选择所有含 title 属性的元素,title 的值可以是一系列由空格隔开的单词,其中包含单词 flower。
[title~="flower"] { border:5px solid yellow; }
具体地,match with title="flower", title="summer flower", and title="flower new", but not
title="my-flower" or title="flowers".
[attribute*=value] Selector
The [attribute*=value] selector选择那些含 attribute 的元素,且contains a specified value. does not has to be a whole word![class*="te"] { background:yellow; }
与上面区别,只要属性值里包含te即可,不必是一个完整的单词。
[attribute|=value] Selector
The [attribute|=value] selector 选择那些包含 attribute 的元素, 且以指定的值开始starting with the specified value.
[class|="top"] { background:yellow; }
Note: The value has to be a whole word
必须是完整的单词, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"!
[attribute^=value] Selector
The [attribute^=value] selector 选择那些含 attribute 的元素,且begins with a specified value. 区别于上例,does not have to be a whole word!
[class^="top"] { background:yellow; }
只要属性值以top开始即可,包含 [attribute|=value] 选择器的结果,因此范围比上面的选择器更广。
[attribute$=value] Selector
The [attribute$=value] selector选择那些含 attribute 的元素,且以指定的值结束ends with a specified value. does not have to be a whole word!
[class$="test"] { background:yellow; }
要求不严格,只要属性值的是以 test 结尾即可。
CSS 属性选择器可以用来个性化表格而无需使用class或ID
input[type="text"] { width: 150px; display: block; margin-bottom: 10px; background-color: yellow; } input[type="submit"] { width: 120px; margin-left: 35px; display: block; }
相关文章推荐
- CSS Study Notes— Selectors for Class/Div/Attribute
- [CSS] Targeting Elements with CSS Attribute Selectors
- Use #CSS attribute selectors to display links when <a> has no text value but the `href` has a link
- CSS 笔记六(Image/Attribute Selectors)
- CSS: color style solution with css contexual selectors
- CSS Selectors Level 4新特性全面解析
- 【CSS】Intermediate1:Class and ID Selectors
- css中attribute selector及pseudo class
- css属性选择器中[attribute~=value] 和 [attribute*=value]的区别
- selenium CSS Selectors基础用法
- CSS selectors for Selenium with example,selenium IDE
- BeautifulSoup高级应用 之 CSS selectors /CSS 选择器
- CSS and its selectors- Head first into HTML
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
- Review CSS Selectors
- 30 CSS selectors you must memorize
- CSS selectors and pseudo selectors browser compatibility
- 三十个应该牢牢记住的CSS选择器(上)/The 30 CSS Selectors you Must Memorize
- The 30 CSS Selectors you Must Memorize(30个应该记住的选择器)
- A list of supported CSS selectors when invoking g(..)