Bootstrap：是否可以定義兩種類型的鏈接？

-1

With Bootstrap（在這種情況下不確定），CSS元素可以有多個定義嗎？例如，如果我有一個類，.menu，我試圖使用.menu：a作爲自己的鏈接，但鏈接的樣式將覆蓋此。Bootstrap：是否可以定義兩種類型的鏈接？

我想要的是Menu1的頂部是黑色背景上的白色文字，除了在盤旋和點擊時。

但按鈕應該看起來像現在一樣。這可能嗎？

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<style> 
    .btn-background 
{ 
    color:red; 
} 
.btn-background:a:link 
{ 
/*shouldn't this determine how a button's link looks? */ 
    color:red; 
} 

.menuBackground { 
    background-color: rgb(0,0,0); 
    color:white; 

body { 
    font-family: 'Open Sans', 'Arial', sans-serif; 
} 
.view { 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
margin-top: 3px; 
} 
a:link { 
background-color: rgb(0,0,0); 
color:white; 
text-decoration: none; 
} 
a:visited { 
    background-color: rgb(0,0,0); 
    color:white; 
    text-decoration: none; 
} 

a:hover { 
color: white; background-color: red; 
text-decoration: none; 
} 

a:active { 
background-color: red; 
color:white; 
} 
.menuFont { 
font-size:large; 
} 
.Regular { 
    .lead; 
} 
.footerFont { 
    font-size:small; 
} 
h1 { 
    letter-spacing: 10px; 
} 
</style> 
    </head> 
    <body> 
    <div class="container"> 
    <div class="Jumbotron"> 
     <h1 class="text-primary text-center">TEST PROGRAM</led></h1> 
     <hr> 
     </div> 
    <nav class="navbar navbar-default view menuBackground"> 
    <div class="container-fluid view"> 
     <div class="row"> 
     <div class="col-lg-10 col-lg-offset-10 view" > 
     <ul class="list-inline view linkz" > 
      <li class="menuFont view"><a href="/">Menu1</a></li> 
      <li class="menuFont view"><a href="/Menu">Menu1</a></li> 
     <li class="menuFont view"><a href="/Menu">Menu1</a></li></li> 
      <li class="menuFont view"><a href="/Menu">Menu1</a></li> 
      <li class="menuFont view"><a href="/Menu">Menu1</a></li> 
      <li class="menuFont view"><a href="/Menu">Menu1</a></li> 
      <li class="menuFont view"><a href="/Menu">Menu1</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
    </nav> 
    <div> 


    <h4>What is Lorem Ipsum?</h4> 
    <p class="Regular ">Lorem ipsum dolor sit amet, risus libero justo, sed pellentesque, fringilla in at euismod cras turpis nonummy, phasellus ut vitae, nibh nibh aliquam. Ut parturient amet dui, nulla nec urna arcu eu laoreet. Arcu sed nulla erat turpis, sapien phasellus morbi ac, leo sit, condimentum erat ut massa sociosqu excepteur. Condimentum mi. Molestie porta dolor, ex purus enim in leo lectus eros, dolore aliquet massa. Vestibulum risus, elit sem mauris eros. Aenean tortor. Dui class aliquam dolor nullam sapien arcu. Rutrum nulla etiam dictum wisi a, aperiam non sapien, mauris vitae metus integer non. Urna pellentesque aliquet magna enim, praesent fusce. Feugiat mauris, nullam dignissim adipiscing molestie erat imperdiet, tempor in nisl vel, quam pellentesque enim nulla eaque, ut integer magna nisl imperdiet ante ullamcorper. Orci eu sodales, wisi malesuada.</p> 

    <button type="button" class="btn-background" role="button"> 
    <code><a href="\data\download\yull-reg.exe">Yull-Reg.exe</a></code> 
    </button></p>

頂部的菜單鏈接錯誤。他們不應該是藍色的。我定義了一個btn-background鏈接，只是爲了讓一個btn-background：link：一種風格，但似乎並不奏效。按鈕很好，頂部的菜單鏈接怎樣才能以不同的風格進行管理？

下面是它的外觀。菜單1是正確的。其餘的都不是。當他們盤旋時，他們是正確的。

來源

2016-08-01 Ron

'.menu：a'無效CSS – j08691

使用!important要從其他css文件例如以清除任何風格後

.menuBackground { 
    background-color: rgb(0,0,0) !important; 
    color:white !important;}

和.menu:a

你必須這樣

.menu a{}

鍵入

來源

2016-08-01 14:58:40 knizer

工作正常！謝謝。 – Ron

Bootstrap：是否可以定義兩種類型的鏈接？

回答

相關問題