javascript - 影响导航栏和 slider 的 CSS

Question

基本上我遇到的问题是我有一些 CSS 影响了我的导航栏和 slider ，因为它们都在使用并且本质上导航栏正在工作但 slider 受到了影响。

我对编码还是很陌生，所以我不知 Prop 体要在网上搜索什么来解决这个问题，非常感谢任何帮助。

HTML 受到影响。

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="img/barber4.jpg" alt="" style="margin:0; padding:0;display:block;">
    </li>
    <li>
      <img src="img/menuew-2.jpg" alt="" style="margin:0; padding:0;display:block;">
    </li>
  </ul>
</div>

NAV BAR 

<!--section1-->

<section id="top" class="Back to top">
    
    <img alt="" style="position: absolute;left:312px;width:1280px;" width="1599" height="276" src="img/borderblacktop.png">

<div class="top-bar-container">
  <div class="top-bar">
  </div>
    <nav class="nav-bar">
      <ul>
        <li><a href="#content" class="selected">About</a></li>
          <li><a href="#photos" >Gallery</a></li>
          <li><a href="#menu">Menu</a></li>
          <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>

    </div>

<div class="header-container">
  <div class="header">
      
    </h3>
      
      <h4>

导航栏 CSS:

.top-bar-container .top-bar {
  width: 800px;

}
.top-bar-container .top-bar .logo {
  float: left;
}
.top-bar-container .top-bar .logo span {
  color: #27AD60;

}
.top-bar-container .nav-bar {
  float: right;
}
.top-bar-container .nav-bar ul li {
  list-style-type: none;
  display: inline-block;
  padding: 21px 27px;
  font-size:15px;

  }
.top-bar-container .nav-bar ul li a:not(.active) {
  text-decoration: none;
  color: white;
}
.top-bar-container .nav-bar .active {
  color: white;
  text-decoration: none;
  padding-top:34px;
}

ul {
  list-style: none;
}
ul li {
  display: inline-block;
}
ul li a {
  display: block;
  padding: 16px;
  color: grey;
  text-decoration: none;
  position: relative;
}
ul li a:hover, ul li a.selected{
  color:white;
}
ul li a.selected:before, ul li a:hover:before {
  content: '';
  width: 100%;
  position: absolute;
  top: -19px;
  left: 0;
  height: 3px;
  background: white;
}

h3{
      
    font-size: 121.5%;
  line-height: 2.;
   font-family: 'PT Sans', sans-serif;
  text-align: center;

}

Answer 1

您的问题是 CSS 选择器的描述性不够。 ul 和 li 将针对这两个 HTML 部分。

您可以将它们更改为类或 ID，以便选择器更具描述性。

我建议您阅读 CSS 选择器，因为它会使 HTML 和 CSS 变得容易得多。