CSS Attribute Selector
CSS 2 introduces attribute selector.
Attribute selector can select elements based on their attributes and attribute values.
(1)[att*=val]; (2)[att^=val];(3)[att$=val];
1: [att*=val];Explanation: If the attribute value of the element's attribute represented by att contains the character specified by val, then the element uses this style.
<html>
<head>
<style>
[id*=section]{
background-color:red;
}
</style>
</head>
<body>
<p id="sections9999">
</p>
</body>
</html>Operation effect: except ie Others can be displayed normally. .
2:[att^=val];Explanation: If the attribute value of the element represented by att starts with the character specified by val, then the element uses this style. (In fact, you can understand that in the regular expression, ^ matches the beginning, so...)
Operation effect: Except for IE, everything else can be displayed normally. .
3:[att$=val];Explanation: If the attribute value of the element's attribute represented by att ends with the character specified by val, then the element uses this style. ($ matches the end of the regular expression...)
Running effect: Except for IE, everything else can be displayed normally. .
Let’s look at another example:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
content:"web网页";
color:red;
}
a[href$=jpg]:after{
content:"JPG图像素材";
color:green;
}
</style>
</head>
<body>
<ul>
<li><a href="#">博客</a></li>
<li><a href="#">css选择器</a></li>
<li><a href="#">图像素材</a></li>
</ul>
</body>
</html> Running effect: Except for ie, everything else can be displayed normally. .
