0017.jpg
使用属性选择器可以筛选出设定了特定属性的标签。例如选取所有设定了 title 属性的
这种选择符的第一部分是标签名(img),随后是属性名,放在方括号里:[title] 。
CSS 不限制属性选择符只能使用标签名,也可以使用类。例如: .photo[title]
用于选取类为 photo,而且设置了 title 属性的全部元素。
属性选择符不仅可以选取设定了某个属性的元素,还可以更进一步,选取属性值为指定值的元素。比如我们想突出显示指向某个 URL 的链接:
- a[href = "https://www.jianshu.com/c/1681745eb504"] {
- color: orange;
- font - weight: bold;
- }
又例如需要选取表单中的文本框
- input[type = "text"] {
- color: #fff;
- background: #aaa;
- }
选取含有 attribute 的属性,且 attribute 属性的值是以空格隔开的系列值,其中某个值为 value 的指定元素。 或者选取含有 attribute 的属性,且 attribute 属性只有一个 value 值的元素。 [attribute~=value] 是 [attribute=value] 的加强版。
html 代码CSS 代码
- <p class="first test">我的简书ID:KelvinZ</p>
- <p class="second">这是第二个P元素</p>
- <p class="test">第三个P元素</p>
- <div class="test">这是一个div元素</div>
- p[class~ = "test"] {
- background: pink;
- }
image.png
[attribute|=value]选取含有 attribute 的属性,且 attribute 属性的值是以连字符分隔的系列值,其中第一个值为 value 的指定元素。
HTML 代码CSS 代码
- <p class="test-one">我的简书ID:KelvinZ</p>
- <p class="second-test">这是第二个P元素</p>
- <p class="test">第三个P元素</p>
- <div class="test">这是一个div元素</div>
- p[class |= "test"] {
- background: pink;
- }
image.png
[attribute^=value]选取含有 attribute 的属性,且 attribute 属性的值是以 value 开头的指定元素。
HTML 代码CSS 代码
- <p class="test-one">我的简书ID:KelvinZ</p>
- <p class="test-two">这是第二个P元素</p>
- <p class="test">第三个P元素</p>
- <div class="test">这是一个div元素</div>
- p[class ^= "test"] {
- background: pink;
- }
image.png
[attribute$=value]选取含有 attribute 的属性,且 attribute 属性的值是以 value 结尾的指定元素。
HTML 代码CSS 代码
- <p class="test-one">我的简书ID:KelvinZ</p>
- <p class="test-two">这是第二个P元素</p>
- <p class="test">第三个P元素</p>
- <div class="test">这是一个div元素</div>
- p[class$ = "two"] {
- background: pink;
- }
image.png
[attribute=value]*
选取含有 attribute 的属性,且 attribute 属性的值含有 value 的指定元素。
HTML 代码CSS 代码
- <p class="test-one">我的简书ID:KelvinZ</p>
- <p class="test-two">这是第二个P元素</p>
- <p class="test">第三个P元素</p>
- <div class="test">这是一个div元素</div>
- p[class *= "o"] {
- background: pink;
- }
image.png
其中 [attribute^=value]、[attribute$=value] 和[attribute*=value]是 CSS 3.0 新增的选择符。
上面的选择符匹配规则越严格优先级越高。 例如:img[title="Rabbit"] 选择符定义的 CSS 样式会覆盖 img[title] 中相同定义的 CSS 样式。
最后是我常用的属性选择符的地方。
比如我要把站外的链接用不同颜色的字体突出显示。 a[href^="http://"]
要调整 PDF 文件 padding: a[href$=".pdf"]
希望以上笔记对大家有帮助。 我的其他笔记在微信公众号:Rabbit_svip 欢迎前来点评~
image.png
来源: http://www.jianshu.com/p/c34b9a207520