关于CSS中的:not(:target)
hi,给位师傅好,我对于css中的:not(:target)不是很理解,能不能教教俺 == 本帖最后由 不二如是 于 2019-3-26 09:16 编辑1、关于CSS 选择器用法,可以参看鱼C-CSS手册:传送门
2、:not选择器匹配每个元素是不是指定的元素/选择器。
例如:
:not(p)
{
background:green;
}
为每个非p元素的元素添加绿色背景色
3、:target 选择器可用于选取当前活动的目标元素。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
:target {
border: 2px solid #3e3;
background-color: #eef;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p><a href="#area1">跳转至内容 1</a></p>
<p><a href="#area2">跳转至内容 2</a></p>
<p id="area1"><b>内容 1...</b></p>
<p id="area2"><b>内容 2...</b></p>
</body>
</html>
单击上面的链接,跳转到的指定内容,会添加上面的设置的CSS样式(:target 选择器会突出显示当前活动的 HTML 锚)
本帖最后由 Teagle 于 2019-3-26 09:18 编辑
不二如是 发表于 2019-3-26 09:15
1、关于CSS 选择器用法,可以参看鱼C-CSS手册:传送门
谢谢师傅,我不是这个意思,我想问的是 :not(:target)的组合使用
例如这篇帖子中说的第一案例,隐藏显示评论这个
https://bitsofco.de/the-target-trick/ Teagle 发表于 2019-3-26 09:17
谢谢师傅,我不是这个意思,我想问的是 :not(:target)的组合使用
例如这篇帖子中说的第一案例,隐藏 ...
1、可以用来隐藏内容
HTML:
<a href="#comments">Show Comments</a>
<section id="comments">
<h3>Comments</h3>
<!-- Comments here... -->
<a href="#">Hide Comments</a>
</section>
CSS:
#comments:not(:target) {
display: none;
}
#comments:target {
display: block;
}
#comments:not(:target) {
display: none;
}
呃,,能否讲解一下这段代码的运行逻辑,我不懂 :not(:target) 的组合使用时的运行逻辑 不二如是 发表于 2019-3-26 09:20
1、可以用来隐藏内容
HTML:
#comments:not(:target) {
display: none;
}
是不是可以这么理解:
除去当前活动的这个目标,即除去指向#commect的a标签,点击其他任意标签时,都会隐藏这个#comments Teagle 发表于 2019-3-26 09:30
是不是可以这么理解:
除去当前活动的这个目标,即除去指向#commect的a标签,点击其他任意标签时, ...
是滴
页:
[1]