属性选择器

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

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

1 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

12 篇文章

订阅专栏

为所有具有title属性的p标签设置一个背景为黄色

属性选择器
作用:可以根据元素的属性或属性值来选取指定元素
语法:[属性名] 选取含有指定属性的元素
[属性名=“属性值”]选取含有指定属性值元素
[属性名^=“属性值”]选取属性值以指定内容开头的元素
[属性名$=“属性值”]选取属性值以指定内容结尾的元素
[属性名*=“属性值”]选取属性值以包含指定内容的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 * 为所有具有title属性的p标签设置一个背景为黄色
			 * 属性选择器
			 * 	作用:可以根据元素的属性或属性值来选取指定元素
			 * 	语法:[属性名] 选取含有指定属性的元素
			 * 		 [属性名="属性值"]选取含有指定属性值元素
			 * 		 [属性名^="属性值"]选取属性值以指定内容开头的元素
			 * 		 [属性名$="属性值"]选取属性值以指定内容结尾的元素
			 * 		 [属性名*="属性值"]选取属性值以包含指定内容的元素
			 * 
			 */
			p[class]{
				background-color: red;
			}
			/*p[title]{
				background-color: yellow;
			}*/
			/*
			 * 为title属性值是hello的元素设置一个背景颜色为黄色
			 */
			p[title="hello"]{
				background-color: yellow;
			}
			/*
			 * 为title属性值以ab开头的元素设置一个背景色为蓝色
			 */
			p[title^="ab"]{
				background-color: blue;
			}
			p[title$="e"]{
				background-color: deepskyblue;
			}
			p[title*="m"]{
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		
		<!--
        	title属性,这个属性可以给任何标签指定
        	当鼠标移到元素上时,元素中的title属性的值将会作为提示文字显示
        -->
        
		<p title="hello">我是一个p标签</p>
		<p title="abcd">我是一个p标签</p>
		<p title="hello">我是一个p标签</p>
		<p class="">我是一个p标签</p>
		<p>我是一个p标签</p>
		<p title="abc">我是一个p标签</p>
		<p title="abcde">我是一个p标签</p>
		<p title="abcfe">我是一个p标签</p>
		<p title="abcmfe">我是一个p标签</p>
		
	</body>
</html>