CSS超链接代码不起作用

Question

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

<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>

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

Answer 1

您可以使用a和color覆盖默认的text-decoration样式：

.element a {
    color: #ff0000;
    text-decoration: none;
}

---

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

Answer 2

只是尝试将此代码添加到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 3

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

你的实际HTML是：一个div与class="element"，其中包含一个儿童标签a ...

有关this CSS Tricks article与el.className之间的差异，请参阅.className childElements

一种解决方案是改变你的CSS来定位该模式：.element a，它定位a中具有类<someTag>的所有后代element标签

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

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

至于z-index ...不要打扰，并获得更新的HTML / CSS书籍或教程。查看“盒子模型”以及position: fixed如何与替代品相比。您不需要使用硬编码像素值和定位一切。

<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>