CSS3学习笔记之属性选择器_追加属性 att-优快云博客

CSS3中新追加的三个属性选择器

css中新追加了[att*=val]、[att^=val]、[att$=val]三个属性选择器。

[att*=val]

如果元素使用att表示的属性值包含用val指定的字符串，那么该元素使用这个样式。

<style>
	[id*=box]{
		color: yellow;
	}
	[id*=other]{
		color: red;
	}
</style>
<body>
	<div id='box'>yellow</div>
	<div id='box1'>yellow</div>
	<div id='box2'>yellow</div>
	<div id='box3'>yellow</div>
	<div id='other'>red</div>
	<div id='other1'>red</div>
	<div id='other2'>red</div>
</body>

[att^=val]

如果元素使用att表示的属性值的开头字符为用val指定的字符的话，那么该元素使用这个样式

<style>
	[id^=b]{
		color: yellow;
	}
	[id^=o]{
		color: red;
	}
</style>
<body>
	<div id='box'>yellow</div>
	<div id='box1'>yellow</div>
	<div id='box2'>yellow</div>
	<div id='box3'>yellow</div>
	<div id='other'>red</div>
	<div id='other1'>red</div>
	<div id='other2'>red</div>
</body>

[att$=val]

如果元素使用att表示的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式

<style>
	//第一种方式
	[id$=x]{
		color: yellow;
	}
	[id$=o]{
		color: red;
	}
	//第二种方式
	[id$=\-x]{
		color: yellow;
	}
	[id$=\-o]{
		color: red;
	}
</style>
<body>
	<div id='box-x'>yellow</div>
	<div id='box1-x'>yellow</div>
	<div id='box2-x'>yellow</div>
	<div id='box3-x'>yellow</div>
	<div id='other-o'>red</div>
	<div id='other1-o'>red</div>
	<div id='other2-o'>red</div>
</body>