html 如何只通过 CSS 控制图片在新窗口打开

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 716 天前的主题，其中的信息可能已经有所发展或是发生改变。

rt 。

只能在<style>中修改页面 css 或者在<script>中添加 js 代码，无法修改 html 标签的内容。

如何实现控制点击 a 标签下的图片，在新窗口打开？

貌似无法在 css 中设置 html 标签 target = _blank，尝试设置 img css 的属性也不行

target-name:new;
target-new:tab;

我尝试使用在 head 下添加 <base target="_blank">，但是这样所有可以点击的按钮都在新窗口打开了。

有没有办法只通过 css 来实现，只有 img 标签在新窗口打开

CSS

HTML

标签

窗口

5 条回复 • 2022-11-29 13:09:52 +08:00

libook

2022-11-29 11:37:51 +08:00

可以写 JS 不就可以在运行时操作 HTML 了嘛。document.querySelector 选中要操作的图片 DOM ，然后 setAttribute target 改成_blank

TGl2aWQgIFNC

2022-11-29 11:40:05 +08:00

同楼上，那就用 js 去修改 DOM 呗

gra

2022-11-29 11:45:05 +08:00

js 简单，还不用考虑兼容

BeijingBaby

2022-11-29 11:54:38 +08:00

a[href="http"] { target: new; target-name: new; target-new: tab; }

thinkershare

2022-11-29 13:09:52 +08:00

纯 CSS 理论上来说可以实现，但是因为浏览器并没有实现你要的规范，因此目前此问题无解。
本来应该生效的方案：a:has(img) { target-new:tab; target-name:new; }
但是：目前没有任何浏览器实现 target property css rule 。
另外，此问题 SO 上面已经有此问题的完整答案了，没必要在这里提问了。