引導程序3與W3.CSS導航欄衝突

我遇到了一些問題。儘管嘗試使用Bootstrap和W3.CSS，我決定創建一個w3導航欄。引導程序3與W3.CSS導航欄衝突

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<link rel="stylesheet" href="rsc/bootswatch-cosmo.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div class="w3-top"> 
 
    <div class="w3-bar w3-black w3-hide-small w3-hide-medium"> 
 
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white" style="text-decoration: none;"><i class="fa fa-vcard fa-fw" ></i> SAMPLE</a> 
 
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white" style="text-decoration: none;"><i class="fa fa-star fa-fw"></i> SAMPLE</a> 
 
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white" style="text-decoration: none;"><i class="fa fa-image fa-fw"></i> SAMPLE</a> 
 
    <a href="#" class="w3-bar-item w3-btn w3-border-black w3-bottombar w3-hover-border-white w3-right" style="text-decoration: none;"><i class="fa fa-user-circle fa-fw"></i> SAMPLE</a> 
 
    </div> 
 
</div>

It's尋找真棒不引導，但是當我添加引導程序庫中的導航欄元素的文本變成藍色。
有沒有辦法解決這個問題？如上所示，我甚至將style="text-decoration: none;"添加到所有導航欄元素中以移除藍色，但它不會消失。在此先感謝所有有幫助的答案， - SearchingSolutions

來源

2017-09-01 SearchingSolutions

當處理由第三方樣式表應用的樣式時，有時需要使用！重要聲明來覆蓋這些樣式。舉例來說，你可以嘗試：

.w3-bar-item, .w3-bar-item:hover 
{ 
    color: #000 !important; 
    text-decoration: none !important; 
}

注意，最好的做法一般不使用很重要，因爲它破壞了通過瀏覽器決定哪些款式在有多個案件適用普通特異性規則！但是，如果你的第三方風格使用它，你可能沒有其他選擇。替代方案正在檢查以確保引導程序的CSS首先被加載，以便它被覆蓋，或者直接修改引導CSS來移除顏色。但是，如果您更改bootstrap的CSS文件，稍後會使其升級。

來源

2017-09-01 18:30:37

謝謝！我選擇使用您首先提到的解決方案，將樣式添加到標題中。 – SearchingSolutions

爲什麼你在同一頁上使用2個不同的庫？階級衝突註定要發生在大多數時間。反正這個shd做的伎倆。

a:hover, a:visited, a:link, a:active 
{ 
    text-decoration: none; 
}

這應該保持您的所有鏈接正常。

來源

2017-09-01 17:58:50 reevkandari

引導程序3與W3.CSS導航欄衝突

回答

相關問題