欢迎来到另一个博客以了解CSS选择器。在此博客中，我们将了解属性选择器。
请查看我以前在CSS Selectors
上的帖子什么是属性选择器？
属性选择器是CSS中的一种选择器，它根据特定属性的存在或值选择元素。换句话说，属性选择器允许您根据其属性的值来定位HTML元素。
我们要解决什么问题？
我们正在为书店网站制作页脚。在页脚中，我们有一些链接 - 社交媒体，条款和条件，PDF下载等。我们希望根据其HREF将图标添加到这些链接中。
eg：如果它是社交媒体链接，那么各自的社交媒体图标应该在此旁边，如果它是外部链接，则外部链接图标应该存在，如果是PDF链接，则PDF图标应该在那里。
CSS我们如何处理？
为了达到此要求，我们将使用属性选择器。因此，让我们开始学习
1.前缀匹配选择器
在CSS中，Caret（^）符号用作基于其属性值的开头选择元素的前缀。这称为“启动”属性选择器。
使用属性选择器的语法是：
[attribute^=value]
符合我们的要求，我们可以使用此选择器样式以HTTP开头的所有外部链接。
a[href^="http"] {
padding: 30px;
background: url(images/external.png) no-repeat left center;
background-size: 20px;
}
<a href="http://terms.html">Terms</a>
<a href="http://privacypolicy.html">Privacy</a>
，我们将与外部图标具有所有链接。
ps：到目前为止，不要担心其余的社交媒体链接。我们将一一修复它们
2.后缀匹配选择器
在CSS中，美元符号（$）符号用作后缀，以基于其属性值的末尾选择元素。这称为“端”属性选择器。
[attribute$=value]
符合我们的要求，我们可以使用此选择器样式的所有链接以.pdf，.jpeg。
a[download$="pdf"] {
padding: 30px;
background: url(images/pdf.png) no-repeat left center;
background-size: 20px;
}
a[download$="jpg"] {
padding: 30px;
background: url(images/image.png) no-repeat left center;
background-size: 20px;
}
<a download="learncss.pdf">Learn CSS</a>
<a download="learncss.jpg">Learn CSS</a>
，我们将根据扩展名具有不同的图标。
3.子字符串匹配选择器
在CSS中，星号（*）符号也可以用作属性选择器中的通配符，以选择具有任何属性名称的元素。在属性选择器中使用星号的语法是：
[attribute*=value]
符合我们的要求，我们可以使用此选择器对所有具有社交媒体命名的链接进行样式。
a[href*="facebook"] {
padding: 30px;
background: url(images/facebook.png) no-repeat left center;
background-size: 20px;
}
a[href*="twitter"] {
padding: 30px;
background: url(images/twitter.png) no-repeat left center;
background-size: 20px;
}
a[href*="instagram"] {
padding: 30px;
background: url(images/instagram.png) no-repeat left center;
background-size: 20px;
}
<a href="http://facebook.com">facebook</a>
<a href="http://twitter.com">twitter</a>
<a href="http://instagram.com">instagram</a>
，我们将根据HREF中的社交媒体名称拥有不同的图标。
我们已经通过使用属性选择器满足了我们的需求。
奖励选择器
4.确切的匹配选择器
在CSS中，可以在属性选择器中使用等于（=）的符号，以选择具有精确属性名称的元素。使用均等属性选择器的语法为：
[attribute=value]
img[title=flower] {
border:2px dotted green;
}
<img src="flower.jpg" title="flower" />
5.兄弟姐妹选择器
在CSS中，tilde（〜）符号用作属性选择器中的兄弟姐妹组合器，以根据其属性值在其先进之前根据其属性值选择元素。这称为“属性值包括”选择器。
使用属性值的语法包括：
[attribute~=value]
h2 ~ *[class~="primary"] {
font-weight: bold;
}
<h2>This is a heading</h2>
<p class="primary">hey</p>
例如，上述CSS规则将选择所有元素，其中包含单词“ primary”的所有元素。
快乐学习！