CSS语法中，对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限
于 class 和 id 属性。(注释：Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。
IE6 及更低的版本不支持属性选择器。)
CSS2引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。
### 一,简单属性选择器
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
(1)先来一个简单的例子：为带有 title 属性的所有元素设置样式。
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS选择器演示</title>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="phpStudy" href="http://phpStudy.net">phpStudy</a>
<hr />
<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://phpStudy.net">phpStudy</a>
</body>
</html>
~~~
浏览器运行的结果为：
(2)与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
a[href]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<a href="http://phpStudy.net">phpStudy</a>
<hr />
<h1>无法应用样式：</h1>
<a name="phpStudy">phpStudy</a>
</body>
</html>
~~~
结果显示为：
(3)还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有 href 和 title 属性的
HTML 超链接的文本设置为红色，可以这样写：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
a[href][title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<a title="phpStudy Home" href="http://phpStudy.net">phpStudy</a>
<hr />
<h1>无法应用样式：</h1>
<a href="http://phpStudy.net">phpStudy</a>
<a title="phpStudy Home">phpStudy</a>
</body>
</html>
~~~
运行结果为：
### 二,属性和值选择器
根据标签中的具体属性值选择，除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
下面的例子为 title="phpStudy" 的所有元素设置样式：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS选择器演示</title>
<style type="text/css">
[title=phpStudy]
{
border:5px solid blue;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="phpStudy">Hello world</h2>
<a title="phpStudy" href="http://phpStudy.net">phpStudy</a>
<hr />
<h1>无法应用样式：</h1>
<p title="greeting">Hi!</p>
<a class="phpStudy" href="http://phpStudy.net">phpStudy</a>
</body>
</html>
~~~
浏览器运行的结果为：
需要注意的是：
属性与属性值必须完全匹配。请注意，这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表，匹配就可能出问题。
请考虑一下的标记片段：
~~~
<p class="important warning">This paragraph is a very important warning.</p>
~~~
如果写成 p[class="important"]，那么这个规则不能匹配示例标记。
要根据具体属性值来选择该元素，必须这样写：
~~~
p[class="important warning"] {color: red;}
~~~
### 三,属性和值选择器 - 多个值
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
~~~
p[class~="important"] {color: red;}
~~~
如果忽略了波浪号，则说明需要完成完全值匹配。
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS选择器演示</title>
<style type="text/css">
[title~=hello]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello phpStudy students!</h1>
<hr />
<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello phpStudy students!</p>
</body>
</html>
~~~
浏览器运行的结果为：
提示：
部分值属性选择器与点号类名记法的区别
该选择器等价于我们在类选择器中讨论过的点号类名记法。也就是说，p.important 和 p["important"]应用到 HTML文档时是等价的。那么，为什么还要有"~="属性选择器呢？因为它能用于任何属性，而不只是 class。
例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性
选择器，只选择这些图片：
~~~
img[title~="Figure"] {border: 1px solid gray;}
~~~
这个规则会选择 title 文本包含 "Figure"的所有图像。没有title属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。
### 四,特定属性选择类型
关于特定属性选择器。请看下面的例子：
~~~
[lang|="en"] {color: red;}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
~~~
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
~~~
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
~~~
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS选择器演示</title>
<style type="text/css">
[lang|=en]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h1>无法应用样式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p></body>
</html>
~~~
浏览器运行的结果为：
### 五,子串匹配属性选择器
下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。
按照规范的说法，应该称之为“子串匹配属性选择器”。很多现代浏览器都支持这些选择器，包括 IE7。
下表是对这些选择器的简单总结：
可以想到，这些选择有很多用途。
举例来说，如果希望对指向 phpStudy 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写
样式。可以指定规则为：
~~~
a[href*="phpStudy.net"] {color: red;}
~~~
这个例用等我们用到的时候再详细的解释。还有就是作用无class属性的表单也非常的方便。
- 前言
- HTML学习1：Dreamweaver8的安装
- HTML学习2：初识HTML
- HTML学习3：常用标签之文本标签
- HTML学习4：常用标签之列表标签
- HTML学习5：常用标签之图像标签
- HTML学习6：常用标签之超链接标签
- HTML学习7：常用标签之表格标签
- HTML学习8：常用标签之框架标签
- HTML学习9：常用标签之表单标签
- HTML学习10：表单格式化
- HTML学习11：HTTP 方法
- HTML学习12：其他常见标签之头标签
- HTML学习13：其他常见标签之体标签
- 轻松学习JavaScript一：为什么学习JavaScript
- 轻松学习JavaScript二：JavaScript语言的基本语法要求
- 轻松学习JavaScript三：JavaScript与HTML的结合
- 轻松学习JavaScript四：JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
- 轻松学习JavaScript五：JavaScript的变量和数据类型
- 轻松学习JavaScript六：JavaScript的表达式与运算符
- 轻松学习JavaScript七：JavaScript的流程控制语句
- 轻松学习JavaScript八：JavaScript函数
- 轻松学习JavaScript九：JavaScript对象和数组
- 轻松学习JavaScript十：JavaScript的Date对象制作一个简易钟表
- 轻松学习JavaScript十一：JavaScript基本类型(包含类型转换)和引用类型
- 轻松学习JavaScript十二：JavaScript基于面向对象之创建对象(一)
- 轻松学习JavaScript十二：JavaScript基于面向对象之创建对象(二)
- 轻松学习JavaScript十三：JavaScript基于面向对象之继承(包含面向对象继承机制)
- 轻松学习JavaScript十四：JavaScript的RegExp对象(正则表达式)
- 轻松学习JavaScript十五：JavaScript之BOM简介
- 轻松学习JavaScript十六：JavaScript的BOM学习(一)
- 轻松学习JavaScript十七：JavaScript的BOM学习(二)
- 轻松学习JavaScript二十九：JavaScript中的this详解
- CSS基础学习一：CSS概述
- CSS基础学习二：如何创建 CSS
- CSS基础学习三：CSS语法
- CSS基础学习四：元素选择器
- CSS基础学习五：类选择器
- CSS基础学习六：id选择器
- CSS基础学习七：属性选择器
- CSS基础学习八：派生选择器
- CSS基础学习九：伪类
- CSS基础学习十：伪元素
- CSS基础学习十一：选择器的优先级
- CSS基础学习十二：CSS样式
- CSS基础学习十三：盒子模型
- CSS基础学习十四：盒子模型补充之display属性设置
- CSS基础学习十五：盒子模型补充之外边距合并
- CSS基础学习十六：CSS盒子模型补充之border-radius属性
- CSS基础学习十七：CSS布局之定位
- CSS基础学习十八：CSS布局之浮动
- CSS基础学习十九：CSS布局之图文混排，图像签名，多图拼接和图片特效
- DIV+CSS实操一：经管系网页总体模块布局
- DIV+CSS实操二：经管系网页添加导航栏和友情链接栏
- DIV+CSS实操三：经管系网页内容模块添加标题栏和版权信息模块
- DIV+CSS实操四：经管系网页内容模块内容添加(一)
- DIV+CSS实操五：经管系网页内容模块内容添加(二)
- DIV+CSS实操六：经管系网页添加导航栏下拉菜单
- DIV+CSS实操七：中文系内容模块控制文本不换行和超出指定宽度后用省略号代替
- JS中实现字符串和数组的相互转化