对带有指定属性的 html 元素设置样式。可以为拥有指定属性的 html 元素设置样式，而不仅限于 class 和 id 属性。本文主要给大家介绍了css属性选择器的相关知识，感兴趣的朋友一起看看吧，希望能帮助到大家。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title]{color:red;}
登录后复制
属性和值选择器
立即学习“前端免费学习笔记（深入）”；
下面的例子为 title=”W3School” 的所有元素设置样式：
[title=W3School]{border:5px solid blue;}
登录后复制
属性和值选择器 – 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
登录后复制
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
登录后复制
设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]{ width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial;}input[type="button"]{ width:120px; margin-left:35px; display:block; font-family: Verdana, Arial;}
登录后复制
CSS 选择器参考手册
选择器
描述
[attribute]
用于选取带有指定属性的元素。
[attribute=value]
用于选取带有指定属性和值的元素。
[attribute~=value]
用于选取属性值中包含指定词汇的元素。
[attribute|=value]
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]
匹配属性值以指定值开头的每个元素。
[attribute$=value]
匹配属性值以指定值结尾的每个元素。
[attribute*=value]
匹配属性值中包含指定值的每个元素。
相关推荐：
css 属性选择器 – 根据html元素的name属性值选择改元素
css 属性选择器 – 根据html元素的name属性值选择改元素
css 属性选择器 – 根据html元素的name属性值选择改元素
以上就是详解CSS 属性选择器的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2901124.html
