Question

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>MyApp</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
      <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" type="text/css" href="app.css">
    </head>

    <body>
    <section class="sect-break" id="home-top-container">
        <div class="cell-display">
          <div class="title divInside"><h1>WELCOME!</h1></div>
          <div class="divInside" id="tagline"><h2><i>tagline</i></h2></div>

          <div class="divInside"><h1>WHAT?</h1></div>
          <div class="divInside"><h2><p>Part 1
         <p>Part 2
<p>Part 3</p></h2></div>
        </div>
    </section>
      <section id="problem">
        <div class="title"><h1>WHY?</h1></div>
        <div class="container problem-top-level">
          <div class="row">
            <div class="col-xs-10 col-xs-offset-1 flex j-c-s-between a-i-center">
              <div class="problem-container">
                <div class="flex j-c-center a-i-center"><div class="problem-circle flex j-c-center a-i-center"><i class="fa fa-4x fa-group"></i></div></div>
                <h3>Problem!</h3>
                <p>Reason</p>
              </div>
              <div class="problem-container">
                <div class="flex j-c-center a-i-center"><div class="problem-circle flex j-c-center a-i-center"><i class="fa fa-4x fa-ticket"></i></div></div>
                <h3>Problem!</h3>
                <p>Reason</p>
              </div>
            </div>
          </div>
      </div>
      </section>

      <section id="solution-header" class="sect-break flex a-i-center">
        <div class="m-l-lg title"><h1>Solution</h1></div>    
      </section>

      <section id="solution">
        <div class="container problem-top-level">
          <div class="row">
            <div class="col-xs-10 col-xs-offset-1 flex j-c-s-between a-i-center">
              <div class="problem-container">
                <div class="flex j-c-center a-i-center"><div class="solution-circle flex j-c-center a-i-center"><i class="fa fa-4x fa-glass"></i></div></div>
                <h3>Solution</h3>
                <p>Reason</p>
              </div>
              <div class="problem-container">
                <div class="flex j-c-center a-i-center"><div class="solution-circle flex j-c-center a-i-center"><i class="fa fa-4x fa-home"></i></div></div>
                <h3>Solution</h3>
                <p>Reason</p>
              </div>
              <div class="problem-container">
                <div class="flex j-c-center a-i-center"><div class="solution-circle flex j-c-center a-i-center"><i class="fa fa-4x fa-percent"></i></div></div>
                <h3>Solution</h3>
                <p>Reason</p>
              </div>
            </div>
          </div>
      </section>
      <section id="contact" class="sect-break">
        <h1>Interested? <a href="email.address">Contact us</a></h1>
      </section>

      <script type="text/javascript" src="bundle.js" charset="utf-8"></script>

    </body>
    </html>

这是我在HTML中的头脑，当我使用Chrome的检查工具检查页面时，我看到<style>标签占据了我的大部分CSS，但id我已修改为{{1在height: 100vh标记中，它是<style>。我不能为我的生活弄清楚这是从哪里来的，什么是压倒我的。有什么想法吗？

这是我在app.css中定义height: 300px的方式：

#problem

我根本没有内联#problem { background-color: #0eaca7; height: 100vh; }标签。当页面加载到客户端时，头部会出现<style>标记，可能是通过加载CSS样式表生成的？我是网络开发人员的新手，所以我不确定他们来自哪里。

这是Chrome在检查中显示的内容： chrome inspection tool showing difference between id's.

Answer 1

您需要使用具有更高特异性的选择器。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

像这样：

body > section#problem {
  background-color: #0eaca7;
  height: 100vh;
}

为什么Bootstrap会覆盖我的CSS定义以获取非Bootstrap ID？

1 个答案: