[已解决]关于CSS中的:not(:target)

Teagle · 发表于 2019-3-25 22:39:03

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

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

x

hi，给位师傅好，我对于css中的:not(:target)不是很理解，能不能教教俺 ==

最佳答案

月排行榜 / 总排行榜

不二如是

2019-3-26 09:15:10

本帖最后由不二如是于 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 锚)

跳转到最佳答案楼层

不二如是 · 发表于 2019-3-26 09:15:10

本帖最后由不二如是于 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:17:12

本帖最后由 Teagle 于 2019-3-26 09:18 编辑

不二如是发表于 2019-3-26 09:15
1、关于CSS 选择器用法，可以参看鱼C-CSS手册：传送门

谢谢师傅，我不是这个意思，我想问的是 :not(:target)的组合使用

例如这篇帖子中说的第一案例，隐藏显示评论这个

https://bitsofco.de/the-target-trick/

不二如是 · 发表于 2019-3-26 09:20:39

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;
}

Teagle · 发表于 2019-3-26 09:22:09

#comments:not(:target) {
        display: none;
}

呃，，能否讲解一下这段代码的运行逻辑，我不懂 :not(:target) 的组合使用时的运行逻辑

Teagle · 发表于 2019-3-26 09:30:41

不二如是发表于 2019-3-26 09:20
1、可以用来隐藏内容

HTML：

#comments:not(:target) {
        display: none;
}

是不是可以这么理解：
除去当前活动的这个目标，即除去指向#commect的a标签，点击其他任意标签时，都会隐藏这个#comments

不二如是 · 发表于 2019-3-26 09:35:27

Teagle 发表于 2019-3-26 09:30
是不是可以这么理解：
除去当前活动的这个目标，即除去指向#commect的a标签，点击其他任意标签时， ...

是滴

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