CSS属性选择器的用法（附带实例）

CSS 中的属性选择器是根据属性及属性值筛选应用样式的元素，只需要确认元素是否定义了某个属性，就可以直接在主要的选择器后使用一对方括号指定属性名。

例如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    h1[class] {color:blue;}
    h1[lang] {color:red;}
</style>
<title>HTML5 页面结构</title>
</head>
<body>
<h1 class="title1">标题一</h1>
<h1 class="title1 title2">标题二</h1>
<h1 lang="zh-cn">标题三</h1>
</body>
</html>

style 元素中定义了两个 h1 元素的选择器：

第一个的含义为，当 h1 元素定义 class 属性时显示为蓝色；
第二个的含义为，当 h1 元素定义 lang 属性时显示为红色。

显示结果为，前两个 h1 元素显示为蓝色，第三个 h1 元素显示为红色。

属性选择器中，还可以根据具体的属性值确定应用样式的元素，主要包括如下几种形式：

完整的属性值，如 h1[class="title1"]；
~= 运算符，匹配属性值中使用空格分隔的多个值的其中一个；
^= 运算符，匹配属性值的开始部分；
$= 运算符，匹配属性值的结束部分；
*= 运算符，匹配属性值的一部分；
|= 运算符，匹配特定的属性及其内容。

下面的代码演示了指定属性值的应用：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    h1[class="title1"] {color:blue;}
    h1[lang] {color:red;}
</style>
<title>HTML5 页面结构</title>
</head>
<body>
<h1 class="title1">标题一</h1>
<h1 class="title1 title2">标题二</h1>
<h1 lang="zh-cn">标题三</h1>
</body>
</html>

本例中只有第一个 h1 元素显示为蓝色。

下面的代码演示了匹配多个属性值中的一个：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    h1[class~="title1"] {color:blue;}
    h1[lang] {color:red;}
</style>
<title>HTML5 页面结构</title>
</head>
<body>
<h1 class="title1">标题一</h1>
<h1 class="title1 title2">标题二</h1>
<h1 lang="zh-cn">标题三</h1>
</body>
</html>

本例中，第一个和第二个 h1 元素都显示为蓝色，因为它们的 class 属性中都包含了独立的 title1 内容。

下面的代码演示了三个匹配部分属性值的应用：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    h1[class^="title1"] {color:blue;}
    h1[class$="title2"] {text-decoration:underline;}
    h1[class*="title2"] {font-weight:lighter;}
    h1[lang] {color:red;}
</style>
<title>HTML5 页面结构</title>
</head>
<body>
<h1 class="title1">标题一</h1>
<h1 class="title1 title2">标题二</h1>
<h1 lang="zh-cn" class="title2">标题三</h1>
</body>
</html>

本例中，第一个 h1 元素显示为蓝色；第二个 h1 元素显示为蓝色、下画线和较细的字体；第三个 h1 元素显示为红色、下画线和较细的字体。

|= 运算符用于特殊属性的匹配，如 lang 属性中的语言设置，具体见下面的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    h1[lang|="zh"] {color:red;}
    h1[lang|="en"] {color:blue;}
</style>
<title>HTML5 页面结构</title>
</head>
<body>
<h1 lang="zh-cn">标题一</h1>
<h1 lang="zh">标题二</h1>
<h1 lang="en-us">标题三</h1>
</body>
</html>

本例中 lang 属性包含 zh 或 zh- 内容的 h1 元素显示为红色，如页面中的第一个和第二个 h1 元素；lang 属性包含 en 或 en- 内容的 h1 元素显示为蓝色，如页面中的第三个 h1 元素。

CSS属性选择器的用法（附带实例）

相关文章