网页基础（三十三）属性选择器

最新推荐文章于 2024-10-11 16:46:33 发布

@大娱乐家

最新推荐文章于 2024-10-11 16:46:33 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/qq_41440413/article/details/104790045

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<style>
			/*+
			 * 选择所有p标签有id属性的元素
			 */
			p[id]{
				background-color: red;
			}
			/*
			 * 选择p标签id属性为green的元素
			 */
			p[id="green"]{
				background-color: green;
			}
			p[class|="a"]{
				background-color: blue;
			}
			/*
			 * 选择a标签以http开头的元素
			 */
			a[href^="http"]{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<p id="abc">小红</p>
		<p id="green">小绿毛龟</p>
		<p class="f1 yellow">我最喜欢黄色</p>
		<p class="a-b">小蓝蓝</p>
		<hr />
		<a href="https://home.firefoxchina.cn/">火狐官网</a>
		<br />
		<a href="相邻兄弟元素.html">返回首页</a>
		<br />
		<a href="#">点击下载</a>
	</body>
</html>