CSS重置会干扰主要的CSS样式表，而clearfix无法正常工作

Question

 /* Don't erase box-sizing */ *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -box-sizing: border-box; } /* Don't erase .group */ .group:after { content: ""; display: table; clear: both; } body { background: #cccccc; font-family: Helvetica, Arial, Sans-serif; line-height: 1.5em; font-size: 14px; color: #666666; margin: 0; } a{ color: #f58220; } #main_wrapper{ width: 960px; margin: 0 auto; } header { background: #333333; padding: 30px 0 0 0; } .logo a{ display: block; width: 133px; height: 46px; background: url(http://www.teamusa.org/~/media/USA_Fencing/Logo/Nike-Fencing.png?la=en); background-repeat: no-repeat; background-size: 100% 100%; text-indent: -9999px; margin: 0 0 25px 20px; } .primary ul { background: #666666; } .primary ul li { float: left; border-right: 1px solid #333333; } .primary ul li a { display: block; padding: 20px; color: #ffffff; } .content_wrap { background: e5e5e5; } #main_content { background: #ffffff; float: left; width: 660px; } aside { width: 300px; background: #e5e5e5; float: right; } footer { clear: both; background: #333333; height: 50px; } /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

 <!DOCTYPE HTML}> <html> <head> <title>Yonsei Fencing</title> <link rel="stylesheet" href="reset.css" type="text/css"/> <link rel="stylesheet" href="index5.css" type="text/css"/> </head> <body> <div id="main_wrapper"> <header> <h1 class="logo"><a href="#" title="cool image">This is an image</a></h1> <nav class="primary"> <ul class="group"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> </header><!--end header--> <div class="content_wrap" group> <section id="main_content"> <article class="posts"><img class="thumbnail" src="#" alt="thumbnail"> <div> <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <a href="#" title="readmore">Read More</a> </div> </article> <article class="posts"><img class="thumbnail" src="#" alt="thumbnail"> <div> <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <a href="#" title="readmore">Read More</a> </div> </article> <article class="posts"><img class="thumbnail" src="#" alt="thumbnail"> <div> <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <a href="#" title="readmore">Read More</a> </div> </article> <article class="posts"><img class="thumbnail" src="#" alt="thumbnail"> <div> <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <a href="#" title="readmore">Read More</a> </div> </article> <article class="posts"><img class="thumbnail" src="#" alt="thumbnail"> <div> <h1><a href="#" title="">This is a Lorem Ipsum Heading</a></h1> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <a href="#" title="readmore">Read More</a> </div> </article> </section><!--end main_content--> <aside> <div class="side_box"> <h2 class="sidebar_heading">Sidebar Links</h2> <ul> <li><a href="#" title="">Link 1</a></li> <li><a href="#" title="">Link 2</a></li> <li><a href="#" title="">Link 3</a></li> <li><a href="#" title="">Link 4</a></li> </ul> </div><!--end sidebox--> <div class="side_box"> <h2 class="sidebar_heading">Text Widget</h2> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </br></br>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div><!--end sidebox--> </aside><!--end sidebar--> </div><!--end content wrap--> <footer> <small>Copyright <a href="#">WebSite.</a> All rights reserved.</small> </footer> </div> </body> </html>

Hello, beginner coder here. 您好，这里是初学者。

My CSS Reset ( http://meyerweb.com/eric/tools/css/reset/ ) that's on a separate stylesheet (I combined both CSS stylesheets here) seems to interfere with my main stylesheet by disabling the black background color on my header around my logo. 我的CSS重置（ http://meyerweb.com/eric/tools/css/reset/ ）位于单独的样式表（我在此处合并了两个CSS样式表），似乎通过禁用标头上的黑色背景色来干扰我的主要样式表在我的徽标周围。 The font-size and line-height in the body will not change either. 正文中的字体大小和行高也不会改变。 Also, the ".group:after" ( https://css-tricks.com/snippets/css/clear-fix/ ) is supposed to fill in the missing background color gap in my sidebar, but an empty space remains... 另外，“。group：after”（ https://css-tricks.com/snippets/css/clear-fix/ ）应该可以填补侧边栏中缺少的背景色间隙，但是仍然有空白。。

Help? 救命？

Answer 1

您在header选择器中的background属性后面缺少分号。

CSS重置会干扰主要的CSS样式表，而clearfix无法正常工作

问题描述

1 个解决方案

解决方案1
1 2016-03-27 17:08:19

CSS重置会干扰主要的CSS样式表，而clearfix无法正常工作

问题描述

1 个解决方案

解决方案1 1 2016-03-27 17:08:19

解决方案1
1 2016-03-27 17:08:19