1.屬性選擇器

HTML

<p name="a">用於選取帶有指定屬性的元素</p>
<p name="line">用於選取帶有指定屬性和值的元素</p>
<p name="line1 line2">此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞</p>
<p name="b">用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。</p>
<p name="mline">匹配屬性值以指定值開頭的每個元素</p>
<p name="mlines">匹配屬性值以指定值結尾的每個元素</p>
<p name="mliKnes">選擇器匹配屬性值包含指定值的每個元素</p>

CSS

/*
 	css屬性選擇器
 	[attr]用於選取帶有指定屬性的元素
 	[attr=value]用於選取帶有指定屬性和值的元素
 	[attr~=value]此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞
 	[attr|=value]用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
 	[attr^=value]匹配屬性值以指定值開頭的每個元素
 	[attr$=value]匹配屬性值以指定值結尾的每個元素
 	[attr*=value]選擇器匹配屬性值包含指定值的每個元素
 */
p{
	border: 1px solid #000;
	width: 500px;
}
p[name]{
	background: pink;
}
p[name=line]{
	background: red;
}
p[name~=line2]{
	background: #00CC99;
}
p[name|=b]{
	background: #880000;
}
p[name^=m]{
	background: #6347ED;
}
p[name$=s]{
	background: yellow;
}
p[name*=K]{
	background: fuchsia;
}

CSS3選擇器