如何为导航栏样式指定 id

Question

我已经将导航栏与它自己的样式表结合在一起，它的工作原理与我想要的差不多。但是，如果我取消注释指向 bootstrap 的样式表的链接，它的许多属性将被覆盖。最值得注意的是，菜单项现在位于不同的行中，而不是相同的。

<!doctype html>
<title>Navbar Test</title>

<h1>Navbar Test</h1>

<link rel="stylesheet" href="navbartest.css">

<nav class="navbar">  
  <ul class="nav navbar-nav left-links">
    <li><a class="links" href="#">Home</a></li>
    <li class="dropdown links">
      <span>Menu 1</span>
      <ul class="dropdown-content">
    <li><a href="#">Thing 1</a></li>
    <li><a href="#">Thing 2</a></li>
    <li><a href="#">Thing 3</a></li>
      </ul>
    </li>
    <li class="dropdown links">
      <span>Menu 2</span>
      <ul class="dropdown-content">
    <li><a href="#">Thing 1</a></li>
    <li><a href="#">Thing 2</a></li>
      </ul>
    </li>
    <li class="dropdown links">
      <span>Menu 3</span>
      <ul class="dropdown-content">
    <li><a href="#">Thing 1</a></li>
    <li><a href="#">Thing 2</a></li>
    <li><a href="#">Thing 3</a></li>
    <li><a href="#">Thing 4</a></li>
      </ul>
    </li>
  </ul>
  
  <ul class="nav navbar-nav right-links">
    <li class="dropdown links">
      <span>Welcome Brian</span>
      <ul class="dropdown-content">
    <li><a href="#">User Settings</a></li>
    <li><a href="#">Log Out</a></li>
      </ul>
    </li>
  </ul>
</nav>

<!--
<head>
  <meta charset="utf-8">
  <link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous">

  <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous">

  <link
    rel="stylesheet"
    href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">

  <link
    rel="stylesheet"
    type="text/css"
    href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/extensions/filter-control/bootstrap-table-filter-control.css">
</head>
-->

这是样式表，navbartest.css:

html { font-family: sans-serif; background: #eee; padding: 1rem; }
body { max-width: 960px; margin: 0 auto; background: white; }
h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
a { color: #377ba8; }
hr { border: none; border-top: 1px solid lightgray; }

body{
    margin:0px;
    margin-top:60px;
    padding: 0px;
}

.selected{
   border-bottom: 2px solid purple;
}


.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }

nav { background: slategray; display: flex; align-items: center; padding: 0 0.5rem; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 10;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.left-links{
   flex:1 1 200px;
}
.links {
   display: inline-block;
   text-align: center;
   padding: 14px;
   color: rgb(0, 0, 0);
   text-decoration: none;
   font-size: 17px;
   font-weight: bolder;
}
.links:hover {
   border-bottom: 2px solid purple;
}

我知道解决方案是 increase CSS specificity。我不知道该怎么做。如果我想给它的导航栏一个像“my-navbar”这样的标识符，这样样式表就不会被覆盖，我到底需要在哪里进行这些更改？

Answer 1

而不是使用 <nav class="navbar"> 使用 <nav id="navbar">。 id 比 class 具有更高的特异性权重。然后，对于影响导航栏的每个 CSS 行，都以 nav#navbar 开头，因为它会提高特异性权重。同一类别中的特异性水平 (!important; > inline-stye > head-style > CSS) 是：

tag#id > tag.class > #id > .class > tag

因此，如果每个 CSS 选择器都以 nav#navbar 开头，它将已经胜过每个仅针对标签或 classes 的框架选择器。

如何为导航栏样式指定 id

How to specify ids for navbar style

html

css