您的位置:首页 > Web前端 > CSS

html+css基础入门学习教程之属性选择器详解

2020-04-22 15:59 453 查看

(1)简单属性选择

例子1:

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

*[title] {color:red;}

还可以根据多个属性进行选择,只需将属性选择器链接在一起即可

例子2:

为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:

a[href][title] {color:red;}

(2)根据具体属性值选择

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

新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

例子1:

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

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

例子2:

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

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

(3)属性与属性值必须完全匹配

这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表,匹配就可能出问题

例子:

<p class="important warning">This paragraph is a very important warning.

 

如果写成 p[class="important"],那么这个规则不能匹配示例标记。要根据具体属性值来选择该元素,必须这样写:

p[class="important warning"] {color: red;}

(4)根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点:

p[class~="important"] {color: red;}
  • 点赞
  • 收藏
  • 分享
  • 文章举报
html前端基础入门教程 发布了30 篇原创文章 · 获赞 5 · 访问量 3万+ 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐