不二如是 发表于 2020-2-24 10:39:49

040 - 金木水火土

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

上一集： 039 - 初学CSS的噩梦（VI）



哈哈，废话不多说了，#敲黑板时刻！{:10_281:}



在线视频：传送门



课程思维导图


猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



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

因为：

**** Hidden Message *****
好，那么来好好说下。




匹配页面中含有 attr 属性的元素，和 id/class 大同小异。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
    <style>
      a {
            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>
效果：





用于选择带有指定值属性的元素。

新加 html 和 css 代码：
<style>
       {
            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>
效果：


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


、、、

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

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



课后作业，完成了吗？

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

下一集：41 - 翩若惊鸿 宛若游龙



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ）

一个账号 发表于 2020-2-24 13:03:52

本帖最后由 一个账号 于 2020-2-24 13:05 编辑

猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清

MYlindaxia 发表于 2020-3-13 06:59:54

属性选择器很重要？

Fire4EVER 发表于 2020-6-24 22:14:00

1

pym131420 发表于 2020-11-10 10:44:49

123

trefrn 发表于 2020-12-6 12:31:28

我爱鱼c

natapon 发表于 2021-1-11 23:29:18

回复快快快

笙歌醉梦 发表于 2021-1-20 17:50:46

{:5_90:}

只想白嫖 发表于 2021-2-21 17:41:42

111

O2H2O 发表于 2021-7-9 12:30:26

支持一下

心驰神往 发表于 2021-8-3 16:41:59

yinwei

刘彩玲 发表于 2021-8-12 17:33:03

想看

douTREE 发表于 2021-9-11 17:18:34

因为属性选择器是匹配元素的

归林22 发表于 2021-10-25 15:23:16

继续

laure 发表于 2022-1-22 09:45:07

1

ckblt 发表于 2022-1-26 16:55:08

学到了

18岁的多啦A梦 发表于 2022-5-1 15:03:36

我爱小甲鱼

小坛砸 发表于 2024-4-17 16:14:44

{:10_250:}
页: [1]
查看完整版本: 040 - 金木水火土