Question

下面是一个简单的导航栏，我使用bootstrap实现。

HTML

<!doctype html>
<html>
  <head>
    <title> Bootstrap </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/mobile.css">
  </head>

  <body>
   <div id = "container">
    <nav class="navbar navbar-default">
      <a class="navbar-brand" href="#">Home</a>
    </nav>

    <h4>Search WWW</h4>

    <ul class="nav">
      <li> <a href="#"> Bing </a></li>
      <li> <a href="#"> Google </a></li>
      <li> <a href="#"> Yahoo </a></li>
    </ul>

    <h4> Dubious Websites </h4>

    <ul class="nav">
      <li> <a href="#"> Reddit </a></li>
      <li> <a href="#"> Tumblr </a></li>
      <li> <a href="#"> Youtube </a></li>
    </ul>

    <h4> Reference </h4>

    <ul class="nav">
      <li> <a href="#"> Wow </a></li>
      <li> <a href="#"> Adobe </a></li>
      <li> <a href="#"> Wikipedia </a></li>
    </ul>
   </div>
  </body>
</html>

CSS

body{
    margin: 15px;
}

div {
    width: 25%;
}

.navbar {
    background-color: lightgray;
    font-weight: bold;
}

nav a {
    text-shadow: 1px 1px #fff;
}

h4 {
    margin-top: 20px;
}

ul {
    border: 1px solid lightgray;
    border-radius: 15px;
}

ul li a {
    color: black;
}

ul li a:hover {
    color: lightblue;
}

.nav li a:hover {
    background: none;
}

我有以下问题：

1）如何在导航栏中对齐文本（例如，带有班级名称navbar navbar-default的导航栏）？

2）我不明白当给出的班级名称是.navbar时，如何使用navbar navbar-default选择导航元素？

3）我不明白为什么以下代码片段不起作用

ul li a:hover {
    color: lightblue;
    background: none;

}

但这个片段有效

ul li a:hover {
    color: lightblue;
}

.nav li a:hover {
    background: none;
}

基本上，我的问题是ul有类名nav。那么，为什么ul li a:hover和.nav li a:hover没有引用相同的元素？

Answer 1

2）navbar navbar-default实际上是两个独立的类。因此，引用.navbar会选择该元素。

3）.nav li a:hover更具体，即ul li a：hover。所以在你的第一个例子中，它可能被重写在Bootstrap的css中的其他地方。您可以在此处详细了解css特异性：Points in CSS specificity

Twitter Bootstrap3问题

1 个答案: