CSS Attribute Selectors
来源:互联网 发布:外汇数据分析 编辑:程序博客网 时间:2024/04/29 03:49
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 nottitle="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 Attribute Selectors
- Attribute Selectors
- CSS Study Notes— Selectors for Class/Div/Attribute
- CSS Selectors
- css-selectors
- XPath and CSS Selectors
- Selenium Tips: CSS Selectors
- CSS 3 selectors explained
- CSS学习之CSS Selectors
- Tutorial 2 - CSS Selectors Walkthrough
- CSS selectors difference and examples
- selenium CSS Selectors基础用法
- CSS 派生选择器 contextual selectors
- [Codecademy] HTML&CSS第九课 :CSS Selectors
- selectors
- Selectors
- CSS的选择符(selectors)
- 30 CSS selectors you must memorize
- LeetCode Add Binary
- mysql忘记密码,密码重置
- linux 进程通信 ----管道
- 【转】理解矩阵(三)--看了这些才发觉,读大学的作用就是要用的时候不用再买书了 ̄□ ̄||
- POJ1061 青蛙的约会 (扩展欧几里德)
- CSS Attribute Selectors
- Android之Context详解
- Qt系列-4、Qt 布局管理(器)
- java事务管理
- [HR面试] 65个最常见的面试问题
- codeigniter源代码分析之输出类 Output.php
- 使用XCode建立一个MAC OS X应用
- Android ndk“Unresolved inclusion: <jni.h>”
- CSS3下拉菜单代码分解