Mit Bootstrap (nicht sicher, ob das in diesem Fall wichtig ist), ist es möglich, mehrere Definitionen für CSS-Elemente zu haben? Wenn ich zum Beispiel eine Klasse, .menu, habe, habe ich versucht, .menu: a für eine eigene Verknüpfung zu haben, aber der Stil für die Verknüpfung überschreibt dies.Bootstrap: Können zwei Arten von Links definiert werden?
Was ich will, ist das Menü1 über den oberen, um weißer Text auf schwarzem Hintergrund zu sein, außer wenn über und über den Mauszeiger gehalten.
Aber die Schaltfläche sollte jetzt so aussehen wie jetzt. Ist das möglich?
<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>
Die Menüverknüpfungen oben sind falsch. Sie sollten nicht blau sein. Ich habe einen btn-Hintergrund-Link definiert, nur um einen btn-Hintergrund zu haben: link: ein Stil, aber das scheint nicht zu funktionieren. Der Knopf ist in Ordnung; Wie können die Menüverknüpfungen an der Spitze von einem anderen Stil bestimmt werden?
So sieht es aus. Menü1 ist korrekt. Der Rest ist nicht. Wenn sie über sie schweben, sind sie korrekt.
'.menu: a' ist nicht gültig CSS – j08691