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：是否可以定义两种类型的链接？

回答

相关问题