CSS学习笔记(六)CSS 属性选择器
2013-05-05 21:47
555 查看
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。注释:Internet Explorer 7 (以及更高版本)在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式:[title]
{
color:red;
}
[/code]
亲自试一试
属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式:[title=W3School]
{
border:5px solid blue;
}[/code]
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:[title~=hello]{ color:red; }[/code]
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:
[lang|=en] { color:red; }
设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }
CSS 选择器参考手册
选择器 | 描述 |
---|---|
[attribute] | 用于选取带有指定属性的元素。 |
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
相关文章推荐
- HTML学习笔记之CSS属性设置(一)
- jquery学习 - jquery选择孩子元素和个数/获取css属性
- CSS学习笔记13:background系列属性
- CSS学习笔记——定位position属性的学习
- CSS学习笔记05 display属性
- JQuery学习笔记-属性选择器
- .Net学习笔记----2015-07-14(CSS当中的样式属性详解)
- css学习笔记(五)-字体属性
- H5学习笔记——CSS文本设置属性&颜色表示法
- CSS学习笔记04 CSS文字排版常用属性
- HTML入门学习笔记--CSS属性(2)
- CSS基础学习七:属性选择器
- <学习CSS>第二天笔记-选择器(标签选择器、类选择器、css命名规范、谷歌案例、多类名选择器、id选择器、通配符选择器、伪类选择器)
- JQuery学习笔记之属性选择器
- CSS学习笔记之文本属性
- JQUERY1.9学习笔记 之属性选择器(一) 前缀选择器
- JQuery学习笔记-属性选择器
- CSS学习篇(2)_属性选择器
- css 选择器 (学习笔记)
- CSS学习笔记之背景属性