目录
注意:以下所有实例均基于内联表样式
一、介绍
1、规则
属性选择器的基本格式为“[]+{}”
2、标签属性选择器
(h1标签中含有属性id的选择器)
h1[id]{color: white;}
3、属性值包含选择器
(1)属性值对应相等类型(含有属性id,且等于author的选择器)
[id="author"]{color: red;}
(2)$型,以字符串结尾类型(含有属性class,且class属性值以pra结尾)
[class$="pra"]{color: skyblue;}
(3)^型,以字符串开始类型(含有属性class,且class属性值以字符串af开头)
[class^="af"]{color: brown;}
(4)*型,包含字符串类型(含有属性id,且id属性包含字符串title)
[id*=title]{color: orange;}
二、例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
</head>
<style>
/* 选择含有h1含有id属性 */
h1[id]{
color: white;
}
[id="author"]{
color: red;
}
/* 以pra结尾的属性选择 */
[class$="pra"]{
color: skyblue;
}
/* 以af开头的属性选择 */
[class^="af"]{
color: brown;
}
/* 含有title的属性选择 */
[id*=title]{
color: orange;
}
</style>
<body>
<h1 id="title">回乡偶书</h1>
<h2 id="title">其一</h2>
<h2 id="author">贺知章</h2>
<p class="before pra">少小离家老大回</p>
<p class="before pra">乡音无改鬓毛衰</p>
<p class="after">儿童相见不相识</p>
<p class="after">笑问客从何处来</p>
</body>
</html>