设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 关于CSS中的:not(:target)
返回列表 发新帖
查看: 3484|回复: 6

[已解决]关于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手册：传送门
download.png


2、:not选择器匹配每个元素是不是指定的元素/选择器。

例如：
  1. :not(p)
  2. {
  3. background:green;
  4. }
复制代码


为每个非p元素的元素添加绿色背景色

3、:target 选择器可用于选取当前活动的目标元素。

例如：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style>
  6.         :target {
  7.             border: 2px solid #3e3;
  8.             background-color: #eef;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <h1>这是标题</h1>
  14. <p><a href="#area1">跳转至内容 1</a></p>
  15. <p><a href="#area2">跳转至内容 2</a></p>
  16. <p id="area1"><b>内容 1...</b></p>
  17. <p id="area2"><b>内容 2...</b></p>
  18. </body>
  19. </html>
复制代码

Snip20190326_216.png


单击上面的链接，跳转到的指定内容，会添加上面的设置的CSS样式(:target 选择器会突出显示当前活动的 HTML 锚)

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2019-3-26 09:15:10 | 显示全部楼层    本楼为最佳答案   
本帖最后由 不二如是 于 2019-3-26 09:16 编辑

1、关于CSS 选择器用法，可以参看鱼C-CSS手册：传送门
download.png


2、:not选择器匹配每个元素是不是指定的元素/选择器。

例如：
  1. :not(p)
  2. {
  3. background:green;
  4. }
复制代码


为每个非p元素的元素添加绿色背景色

3、:target 选择器可用于选取当前活动的目标元素。

例如：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <style>
  6.         :target {
  7.             border: 2px solid #3e3;
  8.             background-color: #eef;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <h1>这是标题</h1>
  14. <p><a href="#area1">跳转至内容 1</a></p>
  15. <p><a href="#area2">跳转至内容 2</a></p>
  16. <p id="area1"><b>内容 1...</b></p>
  17. <p id="area2"><b>内容 2...</b></p>
  18. </body>
  19. </html>
复制代码

Snip20190326_216.png


单击上面的链接，跳转到的指定内容，会添加上面的设置的CSS样式(:target 选择器会突出显示当前活动的 HTML 锚)

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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/
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 2019-3-26 09:20:39 | 显示全部楼层
Teagle 发表于 2019-3-26 09:17
谢谢师傅，我不是这个意思，我想问的是 :not(:target)的组合使用

例如这篇帖子中说的第一案例，隐藏 ...

1、可以用来隐藏内容

HTML：
  1. <a href="#comments">Show Comments</a>

  3. <section id="comments">
  4.         <h3>Comments</h3>
  5.         <!-- Comments here... -->
  6.         <a href="#">Hide Comments</a>
  7. </section>
复制代码


CSS：
  1. #comments:not(:target) {
  2.         display: none;
  3. }
  4. #comments:target {
  5.         display: block;
  6. }
复制代码

Target_hide_show.gif
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

Teagle
 楼主| 发表于 2019-3-26 09:22:09 | 显示全部楼层
  1. #comments:not(:target) {
  2.         display: none;
  3. }
复制代码



呃，，能否讲解一下这段代码的运行逻辑，我不懂 :not(:target) 的组合使用时的运行逻辑
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

Teagle
 楼主| 发表于 2019-3-26 09:30:41 | 显示全部楼层
不二如是 发表于 2019-3-26 09:20
1、可以用来隐藏内容

HTML：
  1. #comments:not(:target) {
  2.         display: none;
  3. }
复制代码


是不是可以这么理解：
除去当前活动的这个目标，即除去指向#commect的a标签，点击其他任意标签时，都会隐藏这个#comments
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

是滴
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 20:18

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表