HTML 锚点,禁用样式

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6868009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:47:51  来源:igfitidea点击:

HTML Anchor, Disable Style

htmlcssanchor

提问by Jonathon

I have some html anchor link code, and unlike the rest of document I want it to look like it is not a link.

我有一些 html 锚链接代码,与文档的其余部分不同,我希望它看起来不是链接。

Is there a simple way to disable the style change caused by wrapping text in a anchor tag without having to brute force it to be the same (ie, if I change the body font style I don't have to also change some other :link stuff).

是否有一种简单的方法可以禁用由在锚标记中包装文本引起的样式更改而不必强行使其相同(即,如果我更改正文字体样式,我不必也更改其他一些:link东西)。

回答by Jeff Fischer

Setting color to black and text-decoration to explicitly none is a little more aggressive than worked for me.

将颜色设置为黑色并将文本装饰明确设置为无比对我工作更具侵略性。

I was looking for the CSS of the anchors to be "benign" and just blend into the existing CSS. Here's what I went with:

我一直在寻找锚点的 CSS 是“良性的”,并且只是融入现有的 CSS。这是我的选择:

a.nostyle:link {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

Then I just added the CSS nostyle class to the anchors that I wanted to be unformatted.

然后我只是将 CSS nostyle 类添加到我想要取消格式化的锚点。

回答by BoltClock

If you don't care about IE, you can attach :not(#exclude)(where excludeis the ID of the link in question) to your link styles:

如果您不关心 IE,则可以将:not(#exclude)exclude相关链接的 ID在哪里)附加到您的链接样式:

a:link:not(#exclude), a:visited:not(#exclude) {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

Otherwise I don't think you can brute-force it the way you describe. You can either use an inline style instead (not recommended) or you can use a special class/ID assigned to that link, whose selector you'd group with body. For example, if you had these styles:

否则,我认为您无法按照您描述的方式对其进行暴力破解。您可以改用内联样式(不推荐),也可以使用分配给该链接的特殊类/ID,您可以将其选择器与body. 例如,如果您有这些样式:

body {
    text-decoration: none;
    color: black;
    cursor: auto;
}

a:link, a:visited {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

You can simply toss in a more specific selector, that'd match that link, onto the bodyrule:

您可以简单地将与该链接匹配的更具体的选择器放入body规则中:

body, #exclude {
    text-decoration: none;
    color: black;
    cursor: auto;
}

a:link, a:visited {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

回答by Markandeya

I achieved this by creating a class .reset-aand targeting all of its' pseudo classes.

我通过创建一个类.reset-a并针对它的所有伪类来实现这一点。

Targeting of all pseudo classes is important to make it flawless.

以所有伪类为目标对于使其完美无缺非常重要。

outline: 0property removes the dotted border that surrounds a link when it is focused or active.

outline: 0当链接处于焦点或活动状态时,该属性会移除链接周围的虚线边框。

.reset-a, .reset-a:hover, .reset-a:visited, .reset-a:focus, .reset-a:active  {
  text-decoration: none;
  color: inherit;
  outline: 0;
  cursor: auto;
}