css有几种属性选择器?

属性选择器在css2中引入,使我们可以根据元素的属性及属性值来选择元素。那么css有几种属性选择器?下面本篇文章就来给大家介绍一下CSS 属性选择器,希望对大家有所帮助。

CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。

css有几种属性选择器?

  • [attribute] 用于选取带有指定属性的元素。

  • [attribute=value] 用于选取带有指定属性和值的元素。

  • [attribute~=value] 用于选取属性值中包含指定词汇的元素。

  • [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。

  • [attribute^=value] 匹配属性值以指定值开头的每个元素。

  • [attribute$=value] 匹配属性值以指定值结尾的每个元素。

  • [attribute*=value] 匹配属性值中包含指定值的每个元素。

示例1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			a[href] {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>可以应用样式:</h1>
		<a href="#">HTML中文网!!</a>

		<hr />

		<h1>无法应用样式:</h1>
		<a name="HTML中文网!!">HTML中文网!!</a>
	</body>

</html>

效果图:

示例2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p[class~="important"] {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>可以应用样式:</h1>
		<p class="important warning">This is a paragraph.</p>
		<p class="important">This is a paragraph.</p>

		<hr />

		<h1>无法应用样式:</h1>
		<p class="warning">This is a paragraph.</p>
	</body>

</html>

效果图:

以上就是css有几种属性选择器?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读