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]