鱼C论坛

 找回密码
 立即注册
查看: 8107|回复: 18

[学习笔记] 040 - 金木水火土

[复制链接]
发表于 2020-2-24 10:39:49 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2020-3-14 10:19 编辑






哈哈,废话不多说了,#敲黑板时刻!





在线视频:传送门





课程思维导图

1.png

猛戳

                               
登录/注册后可看大图
超清





如果鱼油理解了前面的几大类选择器,那么属性选择器将非常容易上手。

因为:

游客,如果您要查看本帖隐藏内容请回复

好,那么来好好说下。


[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>
效果:
Snip20200305_25.png



[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>
效果:
Snip20200305_26.png


手动添加属性值可以更精确匹配元素。


[attr $= "val"][attr *= "val"][attr ~= "val"][attr |= "val"]

这几个选择器,就像“正则表达式”,可以更精确匹配元素。

日常使用率不是很高,如果有需求,记得会查表(速查宝典)就好




课后作业,完成了吗?


传送门






                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列学习笔记,请订阅 淘专辑传送门)(不喜欢更要订阅

评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +6 收起 理由
风吹来了 + 5 + 5 + 3
LuckyTiger66 + 5 + 5 + 3 五行相生相剋 風生水起

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-2-24 13:03:52 | 显示全部楼层
本帖最后由 一个账号 于 2020-2-24 13:05 编辑

猛戳

                               
登录/注册后可看大图
超清
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-13 06:59:54 | 显示全部楼层
属性选择器很重要?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-6-24 22:14:00 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-11-10 10:44:49 | 显示全部楼层
123
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-12-6 12:31:28 | 显示全部楼层
我爱鱼c
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-11 23:29:18 | 显示全部楼层
回复快快快
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-20 17:50:46 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-21 17:41:42 | 显示全部楼层
111
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-7-9 12:30:26 | 显示全部楼层
支持一下
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-8-3 16:41:59 | 显示全部楼层
yinwei
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-8-12 17:33:03 | 显示全部楼层
想看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-9-11 17:18:34 | 显示全部楼层
因为属性选择器是匹配元素的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-10-25 15:23:16 | 显示全部楼层
继续
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-1-22 09:45:07 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-1-26 16:55:08 | 显示全部楼层
学到了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2022-5-1 15:03:36 | 显示全部楼层
我爱小甲鱼
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2024-4-17 16:14:44 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2024-11-23 15:54:35 | 显示全部楼层
学习了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 01:58

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表