with bootstrap (not sure matters in case), possible have multiple definitions css elements? instance, if have class, .menu, have tried have .menu:a own link, style link overrides this.
what want menu1's across top white text on black background, except when hovered on , clicked.
but button should now. possible?
<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 determine how 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 lorem ipsum?</h4> <p class="regular ">lorem ipsum dolor sit amet, risus libero justo, sed pellentesque, fringilla in @ 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> the menu links @ top wrong. should not blue. defined btn-background link have btn-background:link:a style doesn't seem work. button fine; how can menu links @ top governed different style?
here how looks. menu1 correct. rest not. when hovered on correct.
use !important after style want clear other css file example
.menubackground { background-color: rgb(0,0,0) !important; color:white !important;} and .menu:a
you must type this
.menu a{} 
Comments
Post a Comment