所有的HTML元素都含有相关的属性。这些属性通常都是有值的。任何一种属性/值对都可以应用在元素的标签中 - 只要它们用空格隔开。它们可以任意排列。
在下面的例子中，用蓝色标记的代码部分是属性，而用红色标记的部分是值。
<h1 id="section1">
<img src="small.gif" width="100" height="100">
<img title="mainimage" alt="main image">
<a href="foo.htm">
<p class="maintext">
<form style="padding: 10px">
属性选择器基于元素的属性和属性值来选取元素。例如，您可能希望在页面内选取所有含有属性值为“small.gif”的图片标签。我们可以通过定义以下规则来找到相对应的元素：
img[src="small.gif"] { border: 1px solid #000; }
有四种类型的属性选择器。
第一种是基于属性的。下面的例子将选择一个元素（这里指“img”）包含了相关的属性。
img[title] { border: 1px solid #000; }
img[width] { border: 1px solid #000; }
img[alt] { border: 1px solid #000; }
第二种是基于值的。下面的例子展示了这种选取属性值为“small.gif”的图片标签。
img[src="small.gif"] { border: 1px solid #000; }
第三种方法是选取值内被空格隔开的实例。下面的例子展示了“alt”属性的值中含有“small”这个词的图片标签。
img[alt~="small"] { border: 1px solid #000; }
第四种方法是选取值中用连字符号隔开的实例。下面的方法选取了带有连字符号的元素。
img[title|="small"] { border: 1px solid #000; }
Internet Explorer 5, 5.5 and 6不支持属性选择器，但是多数其他的标准兼容浏览器支持。早期版本的Opera浏览器也不支持属性选择器。