Bootstrap:是否可以定义两种类型的链接?

时间:2016-08-01 14:54:40

标签: html twitter-bootstrap

使用Bootstrap(不确定在这种情况下是否重要),是否可以为CSS元素定义多个?例如,如果我有一个类,.menu,我试图将.menu:a用于它自己的链接,但是链接的样式会覆盖它。

我想要的是在顶部的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:一个样式,但似乎不起作用。按钮很好;如何在顶部的菜单链接由不同的风格管理?

这是它的外观。 Menu1是正确的。其余的不是。当它们盘旋时它们是正确的。

enter image description here

1 个答案:

答案 0 :(得分:1)

在要从其他css文件中清除的任何样式后使用.menuBackground { background-color: rgb(0,0,0) !important; color:white !important;} 示例

.menu:a

.menu a{}

你必须像这样输入

    CREATE OR REPLACE FUNCTION listAttribut1Job(jobID integer) 
RETURNS Void as
$BODY$
DECLARE
    result attributeJob;
BEGIN
WITH RECURSIVE doc_key_and_value_recursive(key, value) AS (
  SELECT
    t.key,
    t.value
  FROM jobs, json_each(jobs.job) AS t WHERE jobs.id=jobID

  UNION ALL

  SELECT
    CONCAT(doc_key_and_value_recursive.key, $$__$$, t.key),
    CASE
        WHEN json_typeof(t.value) = 'array' 
        THEN json_array_elements(t.value)
        ELSE t.value
    END
  FROM doc_key_and_value_recursive,
    json_each(
        CASE 
        WHEN json_typeof(doc_key_and_value_recursive.value) <> 'object' THEN '{}' :: JSON
        ELSE doc_key_and_value_recursive.value
    END) AS t
)
INSERT INTO jobsAttributeFullList(
    SELECT jobID,REPLACE(key,'.','_'),value      --respect des noms dans pgsql : pas de . ni de -> dans les column names
    FROM doc_key_and_value_recursive
    WHERE json_typeof(doc_key_and_value_recursive.value) <> 'object'
    );
END
$BODY$
language 'plpgsql' ;