CSS3 属性选择器

漂亮疯了

已于 2022-07-29 11:24:54 修改

阅读量138

点赞数

分类专栏： CSS 入门文章标签： css css3 前端

于 2022-05-16 15:12:39 首次发布

本文链接：https://blog.csdn.net/qq_46405281/article/details/124800325

版权

CSS 入门专栏收录该内容

16 篇文章 0 订阅

订阅专栏

属性选择器 (CSS 3)

属性选择器可以根据元素特定属性的来选择元素。

这样就可以不用借助于类或者id选择器。

选择符	简介
E[att]	选择具有 att 属性的 E 元素
E[att=“val”]	选择具有 att 属性，且属性值等于 val 的 E 元素
E[att^=“val”]	匹配具有 att 属性，且值以 val 开头的 E 元素
E[att$=“val”]	匹配具有 att 属性，且值以 val 结尾的 E 元素
E[att*=“val”]	匹配具有 att 属性，且值中含有 val 的 E 元素
E[att\|=“val”]	匹配具有 att 属性，且值以以 val- 开头 (包括val) 的 E 元素

input[type=text] {
    outline: none; 
}

[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

<style type="text/css">
	div[name]{
		background: pink;
	}
</style>
	
	
<body>
	<div name="hello">hello1</div>
    <div>hello2</div>	
</body>

[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

<style type="text/css">		
	[name="hello"]{
		background: pink;
	}
</style>

[attr|=val] : 选择attr属性的值以val-开头（包括val）的元素

[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。

[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。

[attr*=val] : 选择attr属性的值中包含字符串val的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>存在和值属性选择器</title>
		<style type="text/css">
			[name|="hello"]{
				background: pink;
			}
		</style>
	</head>
	<body>
		<div name="hello-1">a</div>
		<div name="hello2">b</div>
		<div name="hello-3 hello">c</div>
		<div name="hello">d</div>
	</body>
</html>

CSS3选择器规范地址： https://www.w3.org/TR/2011/REC-css3-selectors-20110929/

CSS3选择最新选择器规范: https://www.w3.org/TR/selectors