个人中心
gpt4 book ai didi

html - 为什么只应用了我的一些 CSS 选择器？

转载 作者：太空宇宙 更新时间：2023-11-03 22:37:46 24 4
gpt4 key购买 nike

出于某种原因，并非所有 CSS 都应用于我的网页。这不是链接的问题，因为某些样式有效。

具体来说，带有 banner id 的 div 应用了文本和背景颜色，带有 main-body 类的元素有背景颜色和圆 Angular ，其他东西都在工作。但是 body 没有背景颜色，main-body 元素没有边距，还有其他奇怪的东西。

我知道有很多代码需要查看，但这里是:

body {
    background-color: #c0c0c0;
    position: relative;
}

#banner {
    width: 100%;
    background-color: #900000;
    color: white;
    text-align: center;
    padding: 10px;
}

.navbar {
	border-radius: 0px;
	margin-bottom: 0px;
}

.anchor {
    padding-top: 50px;
}

.header {
    color: #900000;
}

.main-body {
    margin: 20px 50px;
    padding: 10px;
    background-color: #ddd;
    border-radius: 20px;
    font-size: 1.25em;
}

.portfolio {
    width: 50%;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

.port-img {
    width: 100%;
    border-radius: 12px;
}

.fa {
    color: #900000;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Collin Baker</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootsrap-theme.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body data-spy="scroll" data-target="#navbar">
        <div id="banner">
            <h1>Collin Baker</h1>
        </div>
        <nav class="navbar navbar-inverse" id="navbar">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html">Collin Baker</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#home"><span class="fa fa-home"></span> Home</a></li>
                        <li><a href="#resume"><span class="fa fa-file-text"></span> R&eacute;sum&eacute;</a></li>
                        <li><a href="#portfolio"><span class="fa fa-folder"></span> Portfolio</a></li>
                        <li><a href="#news"><span class="fa fa-newspaper-o"></span> News</a></li>
                        <li><a href="#contact"><span class="fa fa-phone"></span> Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="anchor" id="home">
            <div class="container-fluid header">
                <h1>Home</h1>
                <h2>"Our self image, strongly held, essentially determines what we become."<br/>&nbsp;&nbsp;&nbsp;&nbsp;- Maxwell Maltz</h2>
            </div>
            <div class="container-fluid main-body">
                <p>Collin Baker. Average name, above average quality. As of now, there is no hard evidence proving that statement, but that's what I'm hoping this website will obtain. I may only be a sophomore in high school, but if you give me a chance to show you what I can do, you'll be giving yourself a chance to show your customers what you can do. Read on if you're interested.</p>
            </div>
            <div class="container-fluid main-body">
                <p>I work with web development, as this page shows. I've also been working on learning app and video game development. I use Android Studio for the former, and Unity 5 for the latter. I learned graphic design, and know how to use Adobe Illustrator. I have experience with various programming languages, including Java and C#. I am capable of learning more as well, and have the ability to pick things up very quickly if need be.</p>
                <p>Communication is a vitally important part of any industry, and is another skill I have. This can be attributed to Speech &amp; Debate, in which I was a Varsity Policy Debater. My communicative abilities also come from my time in Model Arab League, which also gave me the oppurtunity to gain experience with the affairs of other countries, and quickly making decisions under stress.</p>
                <p>Intelligence is also a useful quality no matter the situation. That being the case, I have a 4.0 GPA, and obtained an Academic All-State Selection. I am well able to learn and grow, and apply myself to my work in order to create the best possible outcome.</p>
            </div>
        </div>
        <div class="anchor" id="resume">
            <div class="container-fluid header">
                <h1>R&eacute;sum&eacute;</h1>
                <h2>“Life without knowledge is death in disguise.”<br/>&nbsp;&nbsp;&nbsp;&nbsp;- Talib Kweli</h2>
            </div>
            <div class="container-fluid main-body">
                <p>Donec suscipit ac metus vitae feugiat. In et tincidunt felis, quis rhoncus dui. Aenean sagittis, felis ut pharetra imperdiet, ligula sapien consectetur elit, vel dignissim turpis magna nec massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ac euismod metus. Donec non aliquam nulla. Sed pulvinar tortor sit amet ipsum tristique, eget mattis magna dignissim. Curabitur id nisi in tellus imperdiet porttitor ut et purus. Nam ornare metus a elit vestibulum tempus.</p>
            </div>
        </div>
        <div class="anchor" id="portfolio">
            <div class="container-fluid header">
                <h1>Portfolio</h1>
                <h2>"A gem cannot be polished without friction, nor a man perfected without trials."<br/>&nbsp;&nbsp;&nbsp;&nbsp;- Lucius Annaeus Seneca</h2>
            </div>
            <div>
                <div class="container-fluid main-body text-center portfolio">
                    <img src="TestImages/dubai1.jpg" class="port-img">
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non sem lectus. Curabitur lobortis turpis id pulvinar porta. Phasellus condimentum purus sapien, sit amet volutpat lectus convallis quis.</div>
                </div>
                <div class="container-fluid main-body text-center portfolio">
                    <img src="TestImages/norway1.jpg" class="port-img">
                    <div>Vestibulum bibendum ipsum mi, at ultricies elit ullamcorper sit amet. Nullam ut lobortis eros, eu fringilla diam. Duis eget ullamcorper lectus.</div>
                </div>
                <div class="container-fluid main-body text-center portfolio">
                    <img src="TestImages/dubai2.jpg" class="port-img">
                    <div>Duis vel nibh eget sapien rutrum volutpat eu et felis. Proin blandit est diam, sed ultrices erat ultrices ut. Curabitur id nunc egestas, rutrum velit id, finibus ligula. Morbi ex ipsum, finibus a facilisis ut, ultrices id nisl. Aliquam lacus felis, sodales ut mi ac, facilisis tempus libero. Nunc mattis viverra venenatis.</div>
                </div>
                <div class="container-fluid main-body text-center portfolio">
                    <img src="TestImages/independenceday1.jpg" class="port-img">
                    <div>Maecenas egestas enim sit amet sapien mollis bibendum. Aliquam faucibus, mauris ut ultricies tempor, mauris nisl laoreet nulla, in scelerisque quam odio nec libero. Mauris dapibus molestie vulputate.</div>
                </div>
            </div>
        </div>
        <div class="anchor" id="news">
            <div class="container-fluid header">
                <h1>News</h1>
                <h2>"Develop a passion for learning. If you do, you will never cease to grow."<br/>&nbsp;&nbsp;&nbsp;&nbsp;- Anthony J. D'Angelo</h2>
            </div>
            <div class="container-fluid main-body">
                <p>Praesent non nisi molestie arcu cursus ultricies. Nulla et erat dignissim, egestas leo quis, venenatis urna. Curabitur pulvinar, neque sit amet ultrices accumsan, quam massa vulputate massa, tempor ultrices lorem ligula sit amet magna. Donec et tellus euismod, maximus ipsum a, elementum ipsum. Praesent venenatis elit sed libero suscipit fermentum. Phasellus facilisis quam a hendrerit pulvinar. In ut enim tempus lorem sollicitudin sollicitudin. Ut ullamcorper semper libero, eget maximus tortor faucibus sit amet. Suspendisse convallis nunc suscipit ultrices pellentesque. Phasellus ante nulla, auctor non consectetur id, efficitur eu nulla. Donec at ex malesuada, pellentesque leo sed, molestie justo. Aliquam sagittis euismod justo, sit amet volutpat sapien fringilla sed. Donec condimentum semper volutpat. Pellentesque id consequat elit. Nam iaculis sagittis porttitor.</p>
            </div>
            <div class="container-fluid main-body">
                <p>Sed sodales leo id sem lobortis, non tincidunt neque sagittis. Vestibulum aliquam tortor vel justo imperdiet pretium. Aenean consectetur tempus consectetur. Phasellus ac suscipit ligula. Vivamus suscipit interdum lorem non porta. Praesent pretium neque et lacus iaculis rutrum. Aliquam enim augue, dapibus in arcu at, consectetur euismod ante. Praesent quis nulla vel justo ullamcorper tincidunt non et nisi. Quisque at tellus interdum, egestas massa sit amet, bibendum libero. Integer et vulputate leo, vulputate vestibulum metus. Aliquam aliquam nunc vel suscipit luctus. Donec placerat maximus interdum. Donec magna urna, malesuada ac euismod vitae, tincidunt pulvinar nisl. Ut elit massa, porttitor id pulvinar sed, eleifend eget libero. Nam volutpat mi luctus, faucibus nibh faucibus, fringilla sem.</p>
            </div>
        </div>
        <div class="anchor" id="contact">
            <div class="container-fluid header">
                <h1>Contact</h1>
                <h2>"The most important things in life are the connections you make with others."<br/>&nbsp;&nbsp;&nbsp;&nbsp;- Tom Ford</h2>
            </div>
            <div class="container-fluid main-body">
                <p>Aenean iaculis risus rutrum, finibus diam eu, bibendum nulla. Suspendisse est orci, rutrum eget aliquam quis, fringilla aliquet purus. Sed dapibus justo id interdum tempor. Aliquam quis neque tortor. Donec ullamcorper dolor vel lacinia placerat. Donec lobortis elit et odio maximus dictum. Donec mauris magna, dictum vel ligula non, auctor dictum mi.</p>
            </div>
        </div>
    </body>
</html>

最佳答案

(1) 似乎您的样式被覆盖了，因为 style.css 在 bootstrap.css 之前被调用，所以引导样式将覆盖它们，如果它们具有相同的特异性。

一个简单的解决方案是在 bootstrap.css 之后调用您的 style.css。

(2) 另一种选择是在您的 css 属性值之后使用 !important。

例如..

body {
    background-color: #c0c0c0 !important;
}

希望对您有所帮助。

关于html - 为什么只应用了我的一些 CSS 选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45493623/

24 4 0
文章推荐： html - 适合跨度框CSS中的文本？
文章推荐： node.js - 中间件和 NodeJS 错误
文章推荐： css - 如何包含由 gulp 任务创建的 CSS 缩小脚本的源映射？
文章推荐： node.js - Bower 安装错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com