如何正确链接和访问具有许多 div 的 css 元素？

Question

我知道这是一个基本且已弃用的问题，并且我已经找到了一些关于它的有价值的信息，但我的示例仍然不起作用。我使用引导 css 和 html。

我的主要问题是，我无法正确链接 css 中的元素，因此对元素没有影响。在这种情况下，我想到达“图标栏”类以使其变为白色。

  <nav class="navbar navbar-default navbar-fixed-top">
   <div class="container">
    <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
      <a class="navbar-brand"></a><img class="img-responsive" 
    src="img/mainicon.png" width="50" height="50" alt="main"/>
     </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about">RÓLUNK</a></li>
          <li><a href="#services">SZOLGÁLTATÁSOK</a></li>
          <li><a href="#portfolio">MUNKÁINK</a></li>
          <li><a href="#pricing">AJÁNLATOK</a></li>
          <li><a href="#contact">KAPCSOLAT</a></li>
       </ul>
     </div>
   </div>
  </nav>

这是一个 css 找不到 input[type=text] 的示例。我认为这是因为访问不正确。

   <div id="contact" class="container-fluid bg-grey">
     <h2 class="text-center">Kapcsolat</h2>
      <div class="row slideanim">
       <div class="col-sm-5">
         <p>Lépjen velünk kapcsolatba, és mi 24 órán belül válaszolunk.</p>
         <p><span class="glyphicon glyphicon-map-marker"></span> Budapest, 
         Magyarország</p>
        <p><span class="glyphicon glyphicon-phone"></span> 06-30-760-1018</p>
        <p><span class="glyphicon glyphicon-envelope"></span> 
        info@sethdevelop.hu</p>
</div>

<div class="col-sm-7">
      <div class="row slideanim">
        <div class="col-sm-6 form-group">
          <input class="form-control" id="name" name="name" placeholder="Név/Cégnév" type="text" required>
        </div>
        <div class="col-sm-6 form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
        </div>
      </div>
      <textarea class="form-control" id="comments" name="comments" placeholder="Komment" rows="5"></textarea><br>
      <div class="row">
        <div class="col-sm-12 form-group">
          <button class="btn btn-default pull-right" type="submit">Küldés</button>
        </div>
      </div>
   </div>
 </div>
</div>

CSS：

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  }

  input[type=text]:focus {
    border: 3px solid #555;
  }

Answer 1

您可以使用此 CSS 代码轻松访问图标栏

见 sn-p 或 > jsfilddle

.navbar-default .navbar-header .navbar-toggle .icon-bar {
	background-color:white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container">
    <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
      <a class="navbar-brand"></a><img class="img-responsive" 
    src="img/mainicon.png" width="50" height="50" alt="main"/>
     </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about">RÓLUNK</a></li>
          <li><a href="#services">SZOLGÁLTATÁSOK</a></li>
          <li><a href="#portfolio">MUNKÁINK</a></li>
          <li><a href="#pricing">AJÁNLATOK</a></li>
          <li><a href="#contact">KAPCSOLAT</a></li>
       </ul>
     </div>
   </div>
  </nav>

至于输入，它运作良好。如果它仍然不起作用，您应该尝试使用更具体的选择器，例如使用 input[type="text"] 代替 #contact .form-group input[type="text"]{}