一半的 CSS 未显示

Question

I'm so done looking at this code.我已经看完这段代码了。 I simply cannot find where I am making a mistake, however only a portion of my CSS is processing for my page.我根本找不到我犯错的地方，但是只有一部分 CSS 正在处理我的页面。 Literally, from the image down, and yet I am unable to find any issue.从字面上看，从图像向下，但我找不到任何问题。 Even the gradient is processing correctly.甚至梯度处理正确。 Ironically, the footer, for example, is in fact processing here.具有讽刺意味的是，例如，页脚实际上是在这里处理的。 Any ideas?有任何想法吗？

 @charset "UTF-8"; .navbar-nav>.li>.a { font-family: 'Arial'; font-weight: bold; color: #000000; font-size: 2px; } .navbar-default { border-color: #000000; } .nav.navbar-nav a:hover { color: #206E38; } .dropdown-menu .dropdown .dropdown-toggle a { font-family: 'Arial'; font-weight: bold; font-size: 12px; letter-spacing: ; } .banner { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,206e38+100&1+0,0.52+43,1+100 */ background: linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(159,193,169,0.52) 43%, rgba(32,110,56,1) 100%); /* FF3.6-15 */ background: linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#206e38',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .ptobigtitle { font-family:'Anton', sans-serif; padding: 10px; } .ptosubtitle { font-family: 'Quicksand', sans-serif; font-variant: small-caps; padding-left: 50px; } .navbar-btn { float: right; } .btn-default { background-color: #206E38; color:#FFF; } .jumbotronimg { float: right; width: 250px; height: 321px; } .learnmorebtn { margin-left: 500px; } .articleheadline{ font-family: 'Anton', sans-serif; font-size: 20px; background: #A1C2AB; color: #000; letter-spacing: 2px; padding: 5px; max-width: 400px; margin: 0 auto; margin-left: auto; margin-right: auto; margin-top: 10px; border-style: solid; border-width: 1px; } .info{ bottom: 30px; text-align: center; } .rightinfo{ bottom: 67px; text-align: center; } .footer{ position: fixed; left: 0; bottom: 0; width: 100%; background-color: #CDCDCD; } .bottomfooter { color:#FFF; font-family: 'Arial'; font-size: 10px; } .mailsignup{ background: #CDCDCD; font-family: 'Arial'; font-size: 8px; } .footerheading{ font-family: 'Anton', sans-serif; font-size: 12px; font-weight: bold; text-align: center; letter-spacing: 1px; text-decoration: underline; }.form-inline{ background: #CDCDCD; }

 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shongum Elemantary School - Parent Teacher Organization</title> <link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.min.css" /> <script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script> <script type="text/javascript" src="bootstrap/3/js/bootstrap.min.js"></script> <script type="text/javascript" src="ScriptLibrary/dmxBootstrap3Navigation.js"></script> <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap/3/css/dmxBootstrap3Forms.css" /> <script type="text/javascript" src="bootstrap/3/js/dmxBootstrap3Forms.js"></script> <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"> <script type="text/javascript"> function dmxBootstrap3ComponentsAction(type, target, action) { // v1.0 var evt = jQuery.event.fix(window.event || arguments.callee.caller.arguments[0]), args = Array.prototype.slice.call(arguments, 2); jQuery(target)[type](action); evt.preventDefault(); } </script> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body id="index" data-spy="scroll" data-target=".nav-container" is="dmx-app"> <nav class="navbar navbar-default navbar-fixed-top navbar-left" role="navigation"> <div class="nav-container container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs3-navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <img src="images/ShongumSkyhawkBird_Green_Brand.png" alt="Shongum Elementary School" class="skyhawk_navimage" width="45" height="56"></div> <div class="collapse navbar-collapse" id="bs3-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Programs <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Classes <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Kindergarden</a></li> <li><a href="#">1st Grade</a></li> <li><a href="#">2nd Grade</a></li> <li><a href="#">3rd Grade</a></li> <li><a href="#">4th Grade</a></li> <li><a href="#">5th Grade</a></li> </ul> </li> <li><a href="#">Store</a></li> <li><a href="#">News/Calendar</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">RSD<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <button type="button" class="btn btn-default navbar-btn" onClick="dmxBootstrap3ComponentsAction('modal','#modal','show')">Membership Sign-Up</button> </div> </div> </nav> <div class="jumbotron banner"> <img src="images/ShongumSkyhawkBird_bg.png" alt="Shongum Elemtary School - Skyhawks" class="img-responsive jumbotronimg img-rounded" id="jumbotronimg"/> <h1 class="ptobigtitle">Shongum Elementary School</h1> <h2 class="ptosubtitle">Parent Teacher Organization </h2> <a class="btn btn-primarybtn-lg btn-default learnmorebtn" href="contentPages/about.php">Learn more »</a> </div> <div id="modal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title">Membership Sign-Up</h4> </div> <div class="modal-body"> <p>To become a member of the PTO, please fill out the below form.<br> Thanks so much for joining and making Shongum a success! </p> <form id="form" method="post" role="form"> <div class="form-group"> <label for="input" class="control-label">Input</label> <input type="text" class="form-control" name="input" id="input" placeholder="Text"> </div> <div class="form-group"> <label for="input2" class="control-label">Input 2</label> <input type="text" class="form-control" name="input1" id="input2" placeholder="Text"> </div> <div class="form-group"> <label for="input3" class="control-label">Input 3</label> <input type="text" class="form-control" name="input3" id="input3" placeholder="Text"> </div> <div class="form-group"> <label for="input4" class="control-label">Input 4</label> <input type="text" class="form-control" name="input4" id="input4" placeholder="Text"> </div> <div class="form-group"> <label for="input5" class="control-label">Input 5</label> <input type="text" class="form-control" name="input5" id="input5" placeholder="Text"> </div> <div class="form-group"> <label for="input6" class="control-label">Input 6</label> <input type="text" class="form-control" name="input6" id="input6" placeholder="Text"> </div> <div class="form-group"> <label for="input7" class="control-label">Input 7</label> <input type="text" class="form-control" name="input7" id="input7" placeholder="Text"> </div> <div class="form-group"> <label for="input8" class="control-label">Input 8</label> <input type="text" class="form-control" name="input8" id="input8" placeholder="Text"> </div> <div class="form-group"> <label for="input9" class="control-label">Input 9</label> <input type="text" class="form-control" name="input9" id="input9" placeholder="Text"> </div> <div class="form-group"> <label for="select" class="control-label">Select</label> <select class="form-control" name="select" id="select"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="form-group"> <label for="select2" class="control-label">Select 2</label> <select class="form-control" name="select" id="select2"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="form-group"> <label for="select3" class="control-label">Select 3</label> <select class="form-control" name="select" id="select3"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="form-group"> <label for="select4" class="control-label">Select 4</label> <select class="form-control" name="select" id="select4"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </form> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Submit Form</button> </div> </div> </div> <div class="col-lg-4 info"> <h2 class="articleheadline">This Heading will be controlled by db</h2> <p>This content will be controlled by dB.</p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> </div> <div class="col-lg-4 info"> <h2 class="articleheadline">This Heading will be controlled by db</h2> <p>This content will be controlled by dB. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> </div> <div class="col-lg-4 rightinfo"> <h2 class="articleheadline">This Heading will be controlled by db</h2> <p>This content will be controlled by dB. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> </div> <footer class="footer"> <div class="container-fluid"> <div class="row"> <div class="col-lg-4"> <h2 class="footerheading">OFFICERS</h2> <p>&nbsp;</p> </div> <div class="col-lg-4"> <h2 class="footerheading">Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> </div> <div class="col-lg-4"> <!-- Begin MailChimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:12px 'Anton',sans-serif; width:500px;} /* Add your own MailChimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id="mc_embed_signup"> <form action="https://ShongumPTO.us14.list-manage.com/subscribe/post?u=94f392b8b8898807cb75b5931&amp;id=07d0e3a6fb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate> <div class="mailsignup" id="mc_embed_signup_scroll"> <label class="footerheading" for="mce-EMAIL">Subscribe to the PTO mailing list</label> <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"> <input type="text" name="b_94f392b8b8898807cb75b5931_07d0e3a6fb" tabindex="-1" value=""> </div> <div class="clear"> <input type="submit" value="Subscribe" name="subscribe" class="button"> </div> </div> </form> </div> <!--End mc_embed_signup--> </div> <div class="col-lg-12"> <p class="bottomfooter">Shongum Elementary School - PTO™️</p> </div> </div> </footer> </body> </html>

Answer 1

I believe the problem is simply too many errors in your CSS.我相信问题只是你的 CSS 中有太多错误。 It is not that part of your stylesheet is not being applied, it is that many of your rules are written incorrectly so that they do not style elements as you appear to intend.并不是样式表的一部分没有被应用，而是您的许多规则编写不正确，以至于它们没有按照您的意图设置元素样式。 For example, this selector例如，这个选择器

.navbar-nav>.li>.a {

does not select anything, because it would only select elements of class "a" which are direct descendants of elements of class "li" which in turn are direct descendants of elements of class "navbar-nav", and there are no such elements in your HTML.不选择任何东西，因为它只会选择类“a”的元素，这些元素是“li”类元素的直接后代，而“li”类元素又是“navbar-nav”类元素的直接后代，并且在你的 HTML。 You might mean你可能是说

.navbar-nav > li > a

which selects <a> elements which are direct descendants of <li> elements which are direct descendants of elements with class "navbar-nav", though you might also mean something else (we don't know what you're trying to do with that style).它选择<a>元素，这些元素是<li>元素的直接后代，而这些元素是类“navbar-nav”的元素的直接后代，尽管您可能还有其他意思（我们不知道您想要做什么）那种风格）。 You will just need to go through and fix all the errors in your CSS.您只需要检查并修复 CSS 中的所有错误。 If you have problems and can't figure out why things aren't working, you should ask more specific, concrete questions about individual problems you are having (check out SO's guidelines and this blog post for tips on how to ask).如果您遇到问题并且无法弄清楚为什么事情不起作用，您应该就您遇到的个别问题提出更具体、更具体的问题（查看SO 的指南和这篇博客文章，了解如何提出问题的提示）。

一半的 CSS 未显示

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-08-23 00:38:17

一半的 CSS 未显示

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-08-23 00:38:17

解决方案1
1 已采纳 2018-08-23 00:38:17