CSS 属性选择器

CSS 属性 选择器

顾名思义,CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。


具有特定属性的HTML元素样式

具有特定属性的HTML元素样式不仅仅是class和id。

注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。


属性选择器

下面的例子是把包含标题(title)的所有元素变为蓝色:

实例

[title]
{
color:blue;
}
尝试一下 »

属性和值选择器

下面的实例改变了标题title='w3cschool'元素的边框样式:

实例

[title=w3cschool]
{
border:5px solid green;
}
尝试一下 »

属性和值的选择器 - 多值

下面是包含指定值的title属性的元素样式的例子,使用(~)分隔属性和值:

实例

[title~=hello] { color:blue; }
尝试一下 »

下面是包含指定值的lang属性的元素样式的例子,使用(|)分隔属性和值:

实例

[lang|=en] { color:blue; }
尝试一下 »

表单样式

属性选择器样式无需使用class或id的形式:

实例

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
尝试一下 »

相关文章

CSS 参考手册:CSS [attribute|=value] 选择器

分类CSS教程文档相关推荐:

CSS 教程导读目录 CSS 简介 CSS 语法 CSS Id 和 Class选择器 CSS 创建 CSS 背景(Backgrounds) CSS Text(文本) CSS Fonts(字体) CSS 链接(link) CSS 列表样式(ul) CSS Table(表格) CSS 盒子模型 CSS Border(边框) CSS 轮廓(outline)属性 CSS Margin(外边距) CSS Padding(填充) CSS 分组和嵌套 CSS 尺寸 (Dimension) CSS Display(显示) 与 Visibility(可见性) CSS Positioning(定位) CSS Float(浮动) CSS 水平对齐(Horizontal Align) CSS 组合选择符 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 图片廊 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 总结 无标题文章