<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14-属性选择器</title>
<style>
/*p[class]{*/
/* color:red;*/
/*}*/
p[class="c1"]{
color:red;
}
</style>
</head>
<body>
<!--
1:
p[class] :选中p标签汇总具有class属性的标签
2:
p[class="c1"]:选中p标签中具有class属性且值为c1的标签
-->
<p class="c1">我是段落1</p>
<p class="c2">我是段落2</p>
<p class="c3">我是段落3</p>
<p class="c4">我是段落4</p>
<p class="c1">我是段落5</p>
<p class="c2">我是段落6</p>
<p class="c2">我是段落7</p>
<p class="c2">我是段落8</p>
<p id="hel">我是段落9</p>
<h1 class="nihao">我是标题</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-属性选择器 下</title>
<style>
img[alt*="abc"]{
color: red;
font: italic bold 50px "宋体";
}
</style>
</head>
<body>
<!--
1.属性值以abc开头的
img[alt^="abc"]
2.属性值以abc结尾的
img[alt$="abc"]
3.属性值包含abc的
img[alt*="abc"]
-->
<img src="" alt="abcdefg">
<img src="" alt="defgabc">
<img src="" alt="deabcfg">
</body>
</html>
