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;}
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理
- 学习笔记(13):HTML+CSS前端基础开发视频教程-文本控制属性
- 学习网站开发必备推荐!30天学会HTML和CSS基础入门视频教程 (免费精品课程)
- 学习笔记(12):HTML+CSS前端基础开发视频教程-文字属性
- HTML+CSS基础入门-第十一天(CSS-颜色属性)
- 【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇
- Putty基础教程之(一).入门命令学习及编写HTML
- 学习笔记(19):HTML+CSS前端基础开发视频教程-浮动的概念
- 【教程】html+css零基础入门教程之类选择器详解(二十六)
- 学习笔记(04):HTML+CSS前端基础开发视频教程-表格
- 学习笔记(21):HTML+CSS前端基础开发视频教程-浮动的元素依次贴边
- 学习笔记(26):java教程,java视频,java基础教程,初级Java入门到精通-12.static关键字在属性上...
- CSS学习基础入门教程:了解熟悉css语法
- Python学习入门基础教程(learning Python)--2.3.2Python函数实参详解
- HTML+CSS基础入门-第十五天(CSS-边框属性)
- 【孙伟老师UID课堂】设计师也能会的-WEB前端入门基础HTML+CSS视频教程-孙伟-专题视频课程...
- 学习笔记(11):HTML+CSS前端基础开发视频教程-important
- 学习笔记(29):HTML+CSS前端基础开发视频教程-内外墙法
- 学习笔记(30):HTML+CSS前端基础开发视频教程-大布局
- css入门之html选择器,ID选择器,类选择器,属性选择器