gpt4 book ai didi

html - 为什么 Bootstrap 会为非 Bootstrap id 覆盖我的 CSS 定义?

转载 作者:行者123 更新时间:2023-11-28 05:49:32 27 4
gpt4 key购买 nike

    <!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我已经修改为height: 100vh<style>标签,它是 height: 300px .我终其一生都无法弄清楚这是从哪里来的,是什么压倒了我。有什么想法吗?

这就是我定义 #problem 的方式在 app.css 中:

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

而且我没有任何内联 <style>根本没有标签。当页面在客户端加载时,<style>标 checkout 现在头部,可能是通过加载 CSS 样式表生成的?我是网络开发新手,所以我不确定它们来自哪里。

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

最佳答案

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

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

像这样:

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

关于html - 为什么 Bootstrap 会为非 Bootstrap id 覆盖我的 CSS 定义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37420509/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com