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

回答

相關問題