CSS选择器：不是不是从指定类的重写CSS

-1

在我的网站我有一个与目标=“_ blank”的链接。在其中一些链接上，我希望光标是一个指针。在类名“内联链接”的链接上，我希望它是文本。我用我的整个CSS页面更新了这篇文章。CSS选择器：不是不是从指定类的重写CSS

但是我似乎无法重写CSS。

这里是我的 '完整' 的CSS：

.grouped-link { 
    cursor: pointer; 
} 

.slideout-link { 
    span.show:hover { 
     color: $darkgrey; 
    } 
} 
.section-subtitle a, a.section-subtitle { 
    color: $darkgrey; 
    float: right; 
    text-transform: uppercase; 
    font-size: 16px; 
    font-weight: 400; 
    letter-spacing: 2px; 
    margin-top: 65px; 
    text-decoration: none; 
    border-bottom: 1px solid $darkgrey; 

     &:hover { 
     border-color: $midgrey; 
     color: $midgrey; 
     text-decoration: none; 
    } 
} 

.underline-link { 
    border-bottom: 1px solid $lightgrey; 
    cursor: pointer; 
    padding-bottom: 5px; 
    text-transform: uppercase; 
    width: 150px; 

    &.dark { 
     border-color: $grey; 
     color: $grey; 
    } 

    &:hover { 
     border-color: $midgrey; 
     color: $midgrey; 
     text-decoration: none; 
    } 

    &.light { 
     border-color: $upmidgrey; 
     color: $upmidgrey; 
    } 

    &.lightest { 
     color: $lightgrey; 
    } 
} 

.inline-link { 
    color: $grey; 
    cursor: text; 

    &:hover { 
     text-decoration: none; 
     cursor: text; 
    } 
} 

a[target="_blank"]:not(.inline-link):hover { 
    text-decoration: none; 
    cursor: pointer; 
}

这里是我的html：

<p> Text text text <a className="inline-link" href="http://www.link.com" target="_blank">text</a> text </p>

来源

2017-09-13 EKR

我其实已经试过了，它的工作原理，你应该提供完整的'CSS'。为了有效地覆盖样式，你需要使用完全相同的选择器，即'.parent.parent.parent .child .inline-link＆：hover'等。 – masterpreenz

除非你使用React或要求你一些其他系统使用className代替class，基本上此代码的工作原理：

.inline-link { 
 
    color: grey; 
 
    cursor: text; 
 
} 
 

 
.inline-link:hover { 
 
    text-decoration: none; 
 
    cursor: text; 
 
} 
 

 
a[target="_blank"]:not(.inline-link):hover { 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<p> Text text text <a class="inline-link" href="http://www.link.com" target="_blank">text</a> text </p> 
 
<p> Text text text <a href="http://www.link.com" target="_blank">text</a> text </p>

来源

2017-09-13 00:54:20 Dekel

您的文章中的两个链接在我的浏览器中都有下划线（Windows 10上的Chrome 61），底部链接有指针（'pointer'）光标，所以它在这里不起作用。 – Dai

悬停时，上面一个有“文本”光标，下面没有下划线，下面是规则的（看到区别）。使用铬60. – Dekel

我正在使用React。感谢您的测试，它不在我的网站上工作，所以也许其他事情正在发生。感谢 – EKR

CSS选择器：不是不是从指定类的重写CSS

回答

相关问题