属性伪类选择器

最新推荐文章于 2025-06-12 11:23:36 发布

原创最新推荐文章于 2025-06-12 11:23:36 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#属性伪类选择器

CSS 专栏收录该内容

68 篇文章

订阅专栏

input[value]{}：含有指定属性
input[value="abc"]：含有指定属性值
input[value^="abc"]：属性值起始位置存在的元素
input[value$="abc"]：属性值结束位置存在的元素
input[value*="abc]：属性值任意位置存在的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			input[value=""]{background:#f00;}
			input[value="abc"]{background:#ff0;}
			input[value^="abc"]{background:#0ff;}
			input[value$="abc"]{background:#f0f;}
			input[value*="abc"]{background:#00f;}
		</style>
	</head>
	<body>
		<input type="text" value=""/>
		<input type="text" value="abc"/>
		<input type="text" value="abc_bcd"/>
		<input type="text" value="bcd_abc"/>
		
	</body>
</html>

在这里插入图片描述