当前位置：首页 > 前端技术 > CSS >内容正文

CSS

008_CSS属性选择器

发布时间：2025/4/17 CSS 89 豆豆

生活随笔收集整理的这篇文章主要介绍了 008_CSS属性选择器小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1. CSS 2引入了属性选择器。

2. 属性选择器可以根据元素的属性及属性值来选择元素。

3. 简单属性选择

3.1. 如果希望选择有某个属性的元素, 而不论属性值是什么, 可以使用简单属性选择器。

3.2. 如果您希望把包含标题(title)属性的所有元素变为红色, 可以写作:

*[title] {color: red; }

3.3. 与上面类似, 可以只对有href属性的超链接应用样式:

a[href] {text-decoration: none; }

3.4. 还可以根据多个属性进行选择, 只需将属性选择器链接在一起即可。例如, 为了将同时有href和title属性的html超链接应用样式, 可以这样写:

a[href][title] {text-decoration: line-through; }

3.5. 例子

3.5.1. 代码

<!DOCTYPE html> <html><head><title>简单属性选择</title><meta charset="utf-8" /><style type="text/css">[title] {color: red;}a[href] {text-decoration: none;}a[href][title] {text-decoration: line-through;}</style></head><body><h2 title="Hello world">Hello world</h2><a href="http://w3school.com.cn">W3School</a><a title="W3School" href="http://w3school.com.cn">W3School</a></body> </html>

3.5.2. 效果图

4. 根据具体属性值选择

4.1. 除了选择拥有某些属性的元素, 还可以进一步缩小选择范围, 只选择有特定属性值的元素。

4.2. 例如, 假设希望将指向Web服务器上某个指定文档的超链接变成红色, 可以这样写:

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red; }

4.3. 与简单属性选择器类似, 可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red; }

4.4. 属性与属性值必须完全匹配。

4.5. 例子

4.5.1. 代码

<!DOCTYPE html> <html><head><title>根据具体属性值选择</title><meta charset="utf-8" /><style type="text/css">a[href="http://www.w3school.com.cn/about_us.asp"] {text-decoration: none;}a[href="http://w3school.com.cn"][title="W3School"] {text-decoration: line-through;}</style></head><body><a href="http://www.w3school.com.cn/about_us.asp">About W3School</a><a href="http://w3school.com.cn" title="W3School">W3School</a></body> </html>

4.5.2. 效果图

5. 根据部分属性值选择

5.1. 如果需要根据属性值中的词列表的某个词进行选择(意思是包含某个单词), 则需要使用波浪号(~)。

5.2. 例子

5.2.1. 代码

<!DOCTYPE html> <html><head><title>根据部分属性值选择(具体某个单词)</title><meta charset="utf-8" /><style type="text/css">p[class~="important"] {color: red;}</style></head><body><h1>可以应用样式：</h1><p class="important warning">This is a paragraph.</a><p class="important">This is a paragraph.</a><hr /><h1>无法应用样式：</h1><p class="warning">This is a paragraph.</a></body> </html>

5.2.2. 效果图

6. 特定属性选择类型

6.1. 特定属性选择器, 用于选取带有以指定值开头的属性值的元素, 该值必须是整个单词。请看下面的例子:

*[lang|="en"] {color: red; }

6.2. 上面这个规则会选择lang属性等于en或以en开头的所有元素。因此, 以下示例标记中的前三个元素将被选中, 而不会选择后两个元素:

<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p>

6.3. 一般来说, [att|="val"]可以用于任何属性及其值。当然, 这种属性选择器最常见的用途还是匹配语言值。

6.4. 例子

6.4.1. 代码

<!DOCTYPE html> <html><head><title>特定属性选择类型</title><meta charset="utf-8" /><style type="text/css">*[lang|="en"] {color: blue;}</style></head><body><h1>可以应用样式：</h1><p lang="en">Hello!</p><p lang="en-us">Greetings!</p><p lang="en-au">G'day!</p><hr /><h1>无法应用样式：</h1><p lang="fr">Bonjour!</p><p lang="cy-en">Jrooana!</p></body> </html>

6.4.2. 效果图

7. 子串匹配属性选择器

7.1. 子串匹配属性选择器是更高级的选择器模块, 它是CSS2完成之后发布的。

7.2. 下表是对这些选择器的简单总结:

7.3. 例子

7.3.1. 代码

<!DOCTYPE html> <html><head><title>子串匹配属性选择器</title><meta charset="utf-8" /><style type="text/css">a[href^="http://www.w3school.com"] {text-decoration: none;}a[href$="cn"] {color: orange;}a[href*="microsoft"] {color: red;}</style></head><body><a href="http://www.w3school.com.cn/">W3School</a> <br /><a href="http://www.w3school.com.cn/css/">CSS</a> <br /><a href="http://www.w3school.com.cn/html/">HTML</a> <br /><a href="http://www.w3c.org/">W3C</a> <br /><a href="http://www.microsoft.com">Microsoft</a> <br /><a href="http://www.apple.com.cn">Apple</a></body> </html>

7.3.2. 效果图

8. CSS属性选择器参考手册

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的008_CSS属性选择器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。