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

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

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

《零基础入门学习web开发》第39讲 初学 css 的噩梦 VI | 学习笔记
上一篇:038-结构伪类选择器(II)


01-做网络锚点

什么是页面内锚点
跳转(从一个地方到另一个地方){:10_256:}

咋么做?
**** Hidden Message *****


加特效(: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() 的使用风险还是很大的 (我连续两次用错 {:10_266:})

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

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

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

后果将会。。。

不堪设想



· 更多(吹水笔记-不二如是)·
· 课后作业·
下一篇:040-属性选择器
页: [1]
查看完整版本: 039-其他伪类 + 页面内锚点 | css3 & html5