W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 属性选择器



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

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


CSS [attribute] 选择器

[attribute] 用于选择具有指定属性的元素。

下面的例子选择所有的 <a> 元素添加黄色的背景颜色:

Example

a[target] {
    background-color: yellow;
}
尝试一下 »

CSS [attribute="value"] 选择器

[attribute="value"] s择器用于选择具有指定属性和值的元素。

下面的例子对所有带有target="_blank" 属性的 <a> 元素背景颜色设置为黄色:

Example

a[target="_blank"] {
    background-color: yellow;
}
尝试一下 »

CSS [attribute~="value"] 选择器

[attribute~="value"] 选择器用于选择包含指定单词的属性值的元素。

下面的实例使用包含空间分隔的单词列表的标题属性选择所有元素,其中一个是“flower”:

Example

[title~="flower"] {
    border: 5px solid yellow;
}
尝试一下 »

在以上的实例中将匹配 title="flower",title="summer flower" 和 title="flower new",但是 title="my-flower" 或 title="flowers" 将匹配不到。


CSS [attribute|="value"] 选择器

[attribute|="value"] 选择器用于选择元素指定属性以指定的值。

下面的实例选择具有 "top" 的类属性值的所有元素:

Example

[class|="top"] {
    background: yellow;
}
尝试一下 »

CSS [attribute^="value"] 选择器

[attribute^="value"] 选择器用于选择属性值以指定值开始的元素。

下面的实例选择以 "top" 开始的类属性值的所有元素:

注意: 值不必是全词!

Example

[class^="top"] {
    background: yellow;
}
尝试一下 »

CSS [attribute$="value"] 选择器

[attribute$="value"] 选择器用于选择属性值以指定值结束的元素。

下面的实例选择以 "test" 结束的类属性值的所有元素:

注意: 值不必是全词!

Example

[class$="test"] {
    background: yellow;
}
尝试一下 »

CSS [attribute*="value"] 选择器

[attribute*="value"] 选择器用于选择属性值包含指定值的元素。

下面的实例选择包含 "te" 的类属性值的所有元素:

注意: 值不必是全词!

Example

[class*="te"] {
    background: yellow;
}
尝试一下 »

表单样式

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

Example

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形式风格的例子。


更多CSS选择器实例

使用我们的 CSS 选择器测试 展示不同的选择器。

对于所有的CSS选择器的完整参考,请去我们的 CSS 选择器手册