CSS 属性选择器

对带有指定属性的 HTML 元素设置样式。

能够为拥有指定属性的 HTML 元素设置样式，而不只限于 class 和 id 属性。

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

属性选择器

下面的例子为带有 title 属性的全部元素设置样式：

{
color:red;
}
[title]

亲自试一试

属性和值选择器

下面的例子为 title="W3School" 的全部元素设置样式：

{
border:5px solid blue;
}
[title=W3School]

亲自试一试

属性和值选择器 - 多个值

下面的例子为包含指定值的 title 属性的全部元素设置样式。适用于由空格分隔的属性值：

 { color:red; }[title~=hello]

亲自试一试

下面的例子为带有包含指定值的 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]	匹配属性值中包含指定值的每一个元素。

CSS ID 选择器详解

• CSS 类选择器详解
• CSS 属性选择器详解

ID 选择器容许以一种独立于文档元素的方式来指定样式。

CSS ID 选择器

在某些方面，ID 选择器相似于类选择器，不过也有一些重要差异。

语法

首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

请看下面的规则：

*#intro {font-weight:bold;}

与类选择器同样，ID 选择器中能够忽略通配选择器。前面的例子也能够写做：

#intro {font-weight:bold;}

这个选择器的效果将是同样的。

第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。

如下是一个实际 ID 选择器的例子：

<p id="intro">This is a paragraph of introduction.</p>

亲自试一试

类选择器仍是 ID 选择器？

在类选择器这一章中咱们曾讲解过，能够为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素，并且它还能够应用到更多元素。

区别 1：只能在文档中使用一次

与类不一样，在一个 HTML 文档中，ID 选择器会使用一次，并且仅一次。

区别 2：不能使用 ID 词列表

不一样于类选择器，ID 选择器不能结合使用，由于 ID 属性不容许有以空格分隔的词列表。

区别 3：ID 能包含更多含义

相似于类，能够独立于元素来选择 ID。有些状况下，您知道文档中会出现某个特定 ID 值，可是并不知道它会出如今哪一个元素上，因此您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项仍是一个小节标题。您只知道每一个文档都会有这么一个最重要的内容，它可能在任何元素中，并且只能出现一个。在这种状况下，能够编写以下规则：

#mostImportant {color:red; background:yellow;}

这个规则会与如下各个元素匹配（这些元素不能在同一个文档中同时出现，由于它们都有相同的 ID 值）：

<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em> <ul id="mostImportant">This is important!</ul> 

亲自试一试：

• 为 id 为 mostImportant 的 h1 元素设定样式
• 为 id 为 mostImportant 的 em 元素设定样式
• 为 id 为 mostImportant 的 ul 元素设定样式

区分大小写

请注意，类选择器和 ID 选择器多是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，因此类和 ID 值的大小写必须与文档中的相应值匹配。

所以，对于如下的 CSS 和 HTML，元素不会变成粗体：

#intro {font-weight:bold;}

<p id="Intro">This is a paragraph of introduction.</p>

因为字母 i 的大小写不一样，因此选择器不会匹配上面的元素。