Question

我有一个不符合我的css代码的角落链接：这里的代码编辑器没有像JSFiddle那样将它转换到角落。 My JSFiddle link 我不希望看到超链接下划线或浏览器默认的超链接颜色。如果我删除了z-index，它也会删除文本。当我开始工作时，我会将这些代码放在网站上，因此需要保持最重要的一切。我在这里做错了什么？

＆＃13;

<style type="text/css">
.element{  
	height: 35px;
    width: 140px;
    background-color: #fffea1;
    position: fixed;
    top: 15px;
    right: -30px;
    text-align: center;
    color: #830303;
    font-weight: 600;
    font-size: 24px;
    white-space: nowrap;
  -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}
.element:before {
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    border-width: 37px;
    border-left-width: 53px;
    border-right-width: 26px;
    content: "";
    display: block;
    left: -49px;
    position: fixed;
    width: 141%;
    border-top-width: 0px;
    border-bottom-color: #fffea1;
    top: -2px;
    z-index: -1;
}
a.element:link
{
   color: #830303;
   text-decoration: none;
}
a.element:visited
{
   color: #830303;
   text-decoration: none;
}
a.element:hover
{
   color: #830303;
   text-decoration: none;
}
a.element:active
{
   color: #830303;
   text-decoration: none;
}
</style>

＆＃13;

<div class="element"><a href="know.html" target="_blank">KNOW</a></div>

＆＃13;

Answer 1

尝试将此代码添加到CSS中以更改链接颜色并删除下划线：

a{
  color:black;
  text-decoration:none;
}

<style type="text/css">
.element{  
	height: 35px;
    width: 140px;
    background-color: #fffea1;
    position: fixed;
    top: 15px;
    right: -30px;
    text-align: center;
    color: #830303;
    font-weight: 600;
    font-size: 24px;
    white-space: nowrap;
  -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}
.element:before {
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    border-width: 37px;
    border-left-width: 53px;
    border-right-width: 26px;
    content: "";
    display: block;
    left: -49px;
    position: fixed;
    width: 141%;
    border-top-width: 0px;
    border-bottom-color: #fffea1;
    top: -2px;
    z-index: -1;
}
a{
    color:black;
    text-decoration:none;
}
a.element:link
{
   color: #830303;
   text-decoration: none;
}
a.element:visited
{
   color: #830303;
   text-decoration: none;
}
a.element:hover
{
   color: #830303;
   text-decoration: none;
}
a.element:active
{
   color: #830303;
   text-decoration: none;
}
</style>

<div class="element"><a href="know.html" target="_blank">KNOW</a></div>

Answer 2

您当前的超链接CSS目标是a.element，这不是正确的选择器。那就是寻找一个标签<a>，它本身有一个类名element ...

您的实际HTML是：div class="element" 包含子标记 a ...

有关el.className与.className childElements

之间的区别，请参阅this CSS Tricks article

一种解决方案是将CSS更改为目标模式： .element a定位a内<someTag>个element个标记.element a

此外，“元素”不是类名的绝佳选择，因为页面上的所有内容都是HTML“元素”。选择更具描述性的内容。

另外，由于您没有更改文本颜色（为什么不？），请不要为每个伪元素重复CSS规则。只需将它们直接放在a或z-index上即可设置默认文字颜色＆amp;从页面上的每个链接中删除文本修饰。然后在链接处于不同状态时仅更改颜色或字体大小等。

至于position: fixed ...不要打扰，并获得更新的HTML / CSS书籍或教程。查看“框模型”以及<style type="text/css"> .element{ height: 35px; width: 140px; background-color: #fffea1; position: fixed; top: 15px; right: -30px; text-align: center; color: #830303; font-weight: 600; font-size: 24px; white-space: nowrap; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); } .element:before { box-sizing: border-box; border-style: solid; border-color: transparent; border-width: 37px; border-left-width: 53px; border-right-width: 26px; content: ""; display: block; left: -49px; position: fixed; width: 141%; border-top-width: 0px; border-bottom-color: #fffea1; top: -2px; z-index: -1; } .element a { color: #830303; text-decoration: none; } .element a:visited { color: #830303; } .element a:hover { color: #830303; } .element a:active { color: #830303; } </style>如何与替代方案相比较。您不需要使用硬编码的像素值和为一切定位。

<div class="element"><a href="know.html" target="_blank">KNOW</a></div>

Answer 3

您可以使用color和text-decoration覆盖默认的.element a { color: #ff0000; text-decoration: none; }样式：

a {

确保在CSS规则的末尾包含.element {，以覆盖任何默认样式。仅定位.withColumnRenamed不起作用。

CSS超链接代码不起作用

3 个答案: