一、前端基础-css-css的选择器之属性选择器
原创
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[test]{
color: red;
}
[test=t2]{
color: yellow;
}
[test~=t3]{
color: blue;
}
[lang|=en]{
color: green;
}
[test^=test]{
color: rebeccapurple;
}
[test$=t6]{
color: cadetblue;
}
[test*=t7]{
color: aqua;
}
</style>
</head>
<body>
<!-- 属性选择器
1、attribute：用于选取带有指定属性的元素，与属性的值没有关系。
2、attribute=value：用于选取带有指定属性和值的元素。
3、attribute~=value：用于选取属性值中包含指定词汇的元素。
4、attribute|=value：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
5、attribute^=value：匹配属性值以指定值开头的每个元素。
6、attribute$=value：匹配属性值以指定值结尾的每个元素。
7、attribute*=value：匹配属性值中包含指定值的每个元素。
8、可以使用内置属性（id class等）也可以使用自定义的属性
-->
<!-- attribute
1、在head中添加样式（演示方便，可以使用link）
2、用于选取带有指定属性的元素，与属性的值没有关系。
3、可以使用自定义的属性
-->
<div test="t1">属性选择器之attribute</div>
<!-- attribute=value
1、在head中添加样式（演示方便，可以使用link）
2、用于选取带有指定属性和值的元素。
3、可以使用自定义的属性
-->
<div test="t2">属性选择器之attribute=value</div>
<!-- attribute~=value
1、在head中添加样式（演示方便，可以使用link）
2、用于选取属性值中包含指定词汇的元素。
3、可以使用自定义的属性
-->
<div test="t3 abc">属性选择器之attribute~=value</div>
<!-- attribute|=value
1、在head中添加样式（演示方便，可以使用link）
2、用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
3、可以使用自定义的属性
-->
<div lang="en-us">属性选择器之attribute|=value</div>
<!-- attribute^=value
1、在head中添加样式（演示方便，可以使用link）
2、匹配属性值以指定值开头的每个元素。
3、可以使用自定义的属性
-->
<div test="test5">属性选择器之attribute^=value</div>
<!-- attribute$=value
1、在head中添加样式（演示方便，可以使用link）
2、attribute$=value：匹配属性值以指定值结尾的每个元素。
3、可以使用自定义的属性
-->
<div test="t6">属性选择器之attribute$=value</div>
<!-- attribute*=value
1、在head中添加样式（演示方便，可以使用link）
2、attribute*=value：匹配属性值中包含指定值的每个元素。
3、可以使用自定义的属性
-->
<div test="test7">属性选择器之attribute*=value</div>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
