HTML CSS [attribute] 选择器
[attribute] 选择器用于选取带有指定属性的元素。
下例选择所有带有 target 属性的 <a> 元素,代码如下:
<style>
a[target] {
background-color: yellow;
}
</style>
<p>带有 target 属性的链接获得颜色背景:</p>
<a href="https://www.zhuei.com">zhuei.com</a>
<a href="http://www.zhuei.com" target="_blank">www.zhuei.com</a>
CSS [attribute=”value”] 选择器
[attribute=”value”] 选择器用于选取带有指定属性和值的元素。
下例选取所有带有 target=”_blank” 属性的 <a> 元素,代码如下:
<style>
a[target=_blank] {
background-color: yellow;
}
</style>
<p>带有 target 属性的链接获得颜色背景:</p>
<a href="https://www.zhuei.com" target="_top">zhuei.com</a>
<a href="http://www.zhuei.com" target="_blank">www.zhuei.com</a>
CSS [attribute~=”value”] 选择器
[attribute~=”value”] 选择器选取属性值包含指定词的元素。
下例选取 title 属性包含 “flower” 单词的所有元素,代码如下:
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
<img src="/1.jpg" title="klematis flower" width="150" height="113">
<img src="/2.gif" title="flower" width="224" height="162">
只有这个有CSS属性样式
<img src="/3.png" title="tree" width="200" height="358">
CSS [attribute|=”value”] 选择器
[attribute|=”value”] 选择器用于选取指定属性以指定值开头的元素。
注释:值必须是完整或单独的单词,比如 class=”top” 或者后跟连字符的,比如 class=”top-text”。
CSS [attribute^=”value”] 选择器
[attribute^=”value”] 选择器用于选取指定属性以指定值开头的元素。
提示:值不必是完整单词!
CSS [attribute$=”value”] 选择器
[attribute$=”value”] 选择器用于选取指定属性以指定值结尾的元素。
提示:值不必是完整单词!
CSS [attribute=”value”] 选择器 [attribute=”value”] 选择器选取属性值包含指定词的元素。
提示:值不必是完整单词!
所有 CSS 属性选择器
选择器 | 例子 | 例子描述 |
---|---|---|
[attribute] | [target] | 选择带有 target 属性的所有元素。 |
[attribute=value] | [target=_blank] | 选择带有 target=”_blank” 属性的所有元素。 |
[attribute~=value] | [title~=flower] | 选择带有包含 “flower” 一词的 title 属性的所有元素。 |
[attribute|=value] | [lang|=en] | 选择带有以 “en” 开头的 lang 属性的所有元素。 |
[attribute^=value] | a[href^=”https”] | 选择其 href 属性值以 “https” 开头的每个 <a> 元素。 |
[attribute$=value] | a[href$=”.pdf”] | 选择其 href 属性值以 “.pdf” 结尾的每个 <a> 元素。 |
[attribute*=value] | a[href*=”zhuei”] | 选择其 href 属性值包含子串 “zhuei” 的每个 <a> 元素。 |
如果你发现错误或有其他见解,请给www.zhuei.com留言,我们会尽快更新本文!