|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-3-14 10:19 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
如果鱼油理解了前面的几大类选择器，那么属性选择器将非常容易上手。
因为：
好，那么来好好说下。
[attr]
[attr] 匹配页面中含有 attr 属性的元素，和 id/class 大同小异。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
- <style>
- a[target] {
- background-color: blue;
- }
- </style>
- </head>
- <body>
- <p>带有 target 属性的链接会得到蓝色背景：</p>
- <a href="http://www.fishc.com" target="_blank">鱼C工作室</a>
- <a href="http://bbs.fishc.com/forum.php">鱼C论坛</a>
- </body>
- </html>
效果：
[attr ^= "val"]
用于选择带有指定值属性的元素。
新加 html 和 css 代码：
- <style>
- [title=fishc] {
- background-color: green;
- }
- </style>
- <body>
- <p>带有 title 属性且值为 fishc 的链接会得到绿色背景：</p>
- <a href="http://www.fishc.com" target="_blank" title="FihsCHome">鱼C工作室</a>
- <a href="http://bbs.fishc.com/forum.php" title="fishc">鱼C论坛</a>
- <a href="https://space.bilibili.com/314076440/#/" title="fishc">B站</a>
- </body>
效果：
手动添加属性值可以更精确匹配元素。
[attr $= "val"]、[attr *= "val"]、[attr ~= "val"]、[attr |= "val"]
这几个选择器，就像“正则表达式”，可以更精确匹配元素。
日常使用率不是很高，如果有需求，记得会查表（速查宝典）就好
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） |
评分
-
查看全部评分
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-2-24 10:39:49
置顶卡
千斤顶
显身卡
发表于 2020-2-24 13:03:52
