How to specify ids for navbar style-CodePudding

I've glommed together a navbar with its own stylesheet, that works approximately like I want it to. If I uncomment the links to stylesheets for bootstrap, however, many of its properties are overridden. Most noticeably is that the menu items are now in separate rows instead of the same.

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

<h1>Navbar Test</h1>

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

<nav >  
  <ul >
    <li><a  href="#">Home</a></li>
    <li >
      <span>Menu 1</span>
      <ul >
    <li><a href="#">Thing 1</a></li>
    <li><a href="#">Thing 2</a></li>
    <li><a href="#">Thing 3</a></li>
      </ul>
    </li>
    <li >
      <span>Menu 2</span>
      <ul >
    <li><a href="#">Thing 1</a></li>
    <li><a href="#">Thing 2</a></li>
      </ul>
    </li>
    <li >
      <span>Menu 3</span>
      <ul >
    <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 >
    <li >
      <span>Welcome Brian</span>
      <ul >
    <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/[email protected]/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>
-->

And here is the stylesheet, 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;
}

I'm aware that the solution is to increase CSS specificity. I'm not sure how to do that. If I want to give it the navbar an identifier like "my-navbar" so that the stylesheet doesn't get overridden, where exactly do I need to make those changes?

CodePudding user response：

instead of using <nav > use <nav id="navbar">. An id has a higher specificity weight then a class. Then for every single CSS line that effect the navbar start with nav#navbar as it raises the specificty weight. The specificity level within the same category (!important; > inline-stye > head-style > CSS) is:

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

So if every CSS Selector start with nav#navbar it will already outwieght every framework seelctor that only target tags or classes.