属性选择器详解-CSDN博客

本文链接：https://blog.csdn.net/u013630349/article/details/52586404

attribute 表示属性，诸如 id、class、role 等，自定义的属性也可以。

value 表示对应值。

[attribute=value] 选择器用于选择指定了属性和值的元素。
[attribute~=value] 选择器用于选择属性值包含一个指定单词的元素。
[attribute|=value] 选择器用于选择指定属性具有指定值开始的元素。
[attribute^=value] 选择器匹配元素属性值带指定的值开始的元素。
[attribute*=value] 选择器匹配元素属性值包含指定值的元素。
[attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素。

注

div[class^="test"]
{
background:#ffff00;
}
和
[class^="test"]
{
background:#ffff00;
}
差异在于前者是包含确定class的div元素，后者是包含指定class的元素。

jQuery 示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>	
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
	
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
<script>
$(function () { 
	$( "input[id][name$='man']" ).val( "只有这个输入框" );
})
</script>
 
</body>
</html>

CSS 属性选择器