CSS属性选择器

最新推荐文章于 2025-09-28 10:24:25 发布

原创最新推荐文章于 2025-09-28 10:24:25 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css 属性选择器

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

html

28 篇文章

订阅专栏

本文深入讲解了CSS属性选择器的使用方法，包括如何根据元素的属性值进行样式选择，如宽度、高度及alt属性等。通过实例展示了不同属性选择器的应用场景。

顾名思义:属性选择器就是根据属性值来选择元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<!-- 顾名思义:属性选择器就是根据属性值来选择元素 -->
		<style type="text/css">
			img [width] {
				border: blue 10px solid;
				background-color: #0000FF;
				/* 这个选择器会选择HTML中所有包含一个width属性的图片 */
			}
			img[height="300"]{
				border: red thin solid;
				/* 这个选择器会选择height属性为300px的图像 */
				background-color: #0000FF;
			}
			img[alt ~= "flowers"]{
				border: #ccc thin solid;
				/* 这个选择器会选择alt属性包含单词 flowers 的所有图像 */
			}
		</style>
	</head>
	<body>
		<div >
			<img src="../../HelloHBuilder/img/HBuilder.png" height="300"  >
			<img src="../../HelloHBuilder/img/HBuilder.png" >
			<img src="../../HelloHBuilder/img/HBuilder.png" alt="flowers">
		</div>
	</body>
</html>