css 样式链接，但只有文本链接,有什么办法吗？

xdnvmnnf 于 2023-07-01 发布在其他

关注(0)|答案(2)|浏览(135)

我有一个糟糕的一天，似乎我无法找到正确的解决办法，我的问题。
让我们保持简单：我有我的好CSS的链接，但我想申请在文本链接只，所以没有图像或div或任何东西。就发短信
我的代码：

a {
    display: inline-block;
    position: relative;
    color: #ffffff;
}

a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

每一个链接得到了花哨的动画，但我希望它只适用于文本链接。当然，每一张图片都有下划线。所以我问题是：
有没有一种方法可以说“只有文本链接，而不是一切”？我需要的东西在全球范围内工作，而不需要像图像或div的每个元素创建新的类，例如。就像这样

a:text {
color: #ffffff;
}

这是因为很多人将在没有访问代码的情况下处理内容，他们将无法向任何东西添加类。如果他们把一个图像在一个页面上，他们不能写无处的东西，如'这张图片是一个链接，但我需要隐藏下划线的东西'，这件事需要设置和忘记的每个人，除了两个人谁可以看看css.
我发现只有坏的解决方案，如'创建一个类与自定义悬停效果显示什么'，但这将是我最不喜欢的方式，因为我将需要创建自定义类的每一个元素，可以是一个链接的一天。
希望你能帮忙，谢谢

css

来源：https://stackoverflow.com/questions/71115582/style-links-but-text-links-only-is-there-a-way

2条答案

按热度按时间

vmjh9lq91#

不幸的是，HTML不是一种条件语言。
您可以确保只有包含段落的a href标记才能在css中工作。

a p{}

因此，您可以尝试为img标签/其他标签设置不同的CSS，而不是全局链接标签CSS

a img {}

赞(0）回复(0）举报 2023-07-01

e4yzc0pl2#

有点晚了，但是随着:has selector的引入，你可以用这样的东西来设计没有图像的链接（和/或任何你想排除的东西）：

a:not(:has(img,div)) {
  /* styling for links not containing <img> or <div> */
  /* e.g. a beautiful red outline for demonstrational purposes */
  outline: 6px solid red;
}

<a href="#"><img src="https://picsum.photos/140" /></a><br/>
<a href="#">This link has only text</a><br/>
<a href="#"><div>This link has a div in it and will not be targeted</div></a>

注意：在撰写本文时，在Firefox中不支持。所有其他主流浏览器都支持：has选择器，所以希望Firefox很快也会支持。

赞(0）回复(0）举报 2023-07-01

我来回答

css 样式链接，但只有文本链接,有什么办法吗？

2条答案

相关问题

热门标签

最新问答