马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
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
