039-其他伪类 + 页面内锚点 | css3 & html5

liuzhengyuan · 发表于 2020-3-30 21:35:51

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

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

x

本帖最后由 liuzhengyuan 于 2020-4-6 15:37 编辑

《零基础入门学习web开发》第39讲初学 css 的噩梦 VI | 学习笔记

上一篇：038-结构伪类选择器（II）

01-做网络锚点

什么是页面内锚点
跳转（从一个地方到另一个地方）

咋么做？

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

加特效（:target）：

:target {
        background-color: cornflowerblue;
        border: cyan solid 2px;
}

效果图：

02-其他伪类

:lang(language)

:lang(language) 选择器用于选取带有以指定值开头的 lang 属性的元素。（就是匹配是某种语言的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :lang(zh) {
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <p lang="zh">我爱鱼C</p>
    <p lang="en">I love FishC</p>
</body>
</html>

:not(selector)

:not(selector) 选择器匹配非指定元素/选择器的每个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :not(span) {
            color: greenyellow;
        }

        span {
            color: pink;
        }
    </style>
</head>
<body>
    <span>span span span</span>
    <p>p p p p p p p p</p>
    <span>span span span</span>
    <p>p p p p p p p p </p>
    <span>span span span</span>
    <p>p p p p p p p p</p>
    <span>span span span</span>
</body>
</html>

☆ ☆ ☆ ☆ :not() 的使用风险还是很大的 （我连续两次用错

）

如果设置 background-color 的话。。。

就就会出现全部的背景颜色都变了（因为 body 元素算在其中）

或者说不事先对 :not(selector) 中的 selector 设置样式，

后果将会。。。

不堪设想

· 更多（吹水笔记-不二如是） ·

· [url=]课后作业[/url] ·

下一篇：040-属性选择器

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 039-其他伪类 + 页面内锚点 | css3 & html5

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

本帖被以下淘专辑推荐: