0
我在我的页面上有一个侧边栏，我尝试应用一些自定义CSS，但由于某种原因，即使它正确级联，我的裁决也不会覆盖旧裁剪。任何想法为什么发生这种情况？css裁决在使用id选择器时未覆盖
我使用normalize.css，但我不认为这是问题所在。
我想更改#author-name和#author-bio的边距。
感谢您的帮助。
/************************************************
SEARCHBOX
************************************************/
#articles-sidebar {
\t margin: 0.5em 0;
\t padding: 1em;
}
#articles-sidebar h2, #articles-sidebar p {
\t margin: 0;
\t padding: 0;
}
#articles-sidebar input {
\t box-sizing: border-box;
\t padding: 0.5em;
\t margin: 0.5em 0;
}
#articles-sidebar input[type="submit"] {
\t border: none;
\t color: #fff;
\t background-color: #26A65B;
}
/************************************************
ARTICLES
************************************************/
.article-box {
\t padding: 0.5em;
\t margin-bottom: 0.5em;
}
.free {
\t background-color: #e3f9ec;
}
.members {
\t background-color: #f5e8f4;
}
.article-categories {
\t list-style: none;
\t margin: 0.5em 0 0 0;
\t padding: 0;
}
.article-category {
\t margin-right: 0.5em;
\t padding: 0.2em;
\t display:inline-block;
\t /* TODO FIGURE OUT CATEGORY BACKGROUND COLOR */
\t background-color: #fff;
\t font-weight: bold;
}
.article-box h1 {
\t margin: 0.5em 0;
\t padding: 0;
}
.article-box h3 {
\t margin: 0;
\t padding: 0;
}
.article-box p {
\t margin: 0.5em 0;
\t padding: 0;
}
.article-box a:link, .article-box a:visited {
\t text-decoration: none;
\t color: #26A65B;
}
.article-box a:hover {
\t color: #913D88;
}
/************************************************
SINGLE ARTICLE PAGE
************************************************/
#articles-feed button {
\t background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
display: inline-block;
margin: 1em 0; \t
}
/************************************************
SINGLE ARTICLE AUTOR
************************************************/
#author-img {
\t height: 100px;
\t border-radius: 150px;
\t border: 1px solid black;
\t display: block;
\t margin: 1em 0;
}
#author-name {
\t margin: 1em 0;
}
/************************************************
TABLET
************************************************/
@media screen and (min-width: 768px) {
}
/************************************************
LAPTOP
************************************************/
@media screen and (min-width: 992px) {
\t /* LAYOUT */
\t #articles-sidebar, #articles-feed {
\t \t display: inline-block;
\t }
\t #articles-sidebar {
\t \t width: 25%;
\t \t float: right;
\t }
\t #articles-feed {
\t \t width: 70%;
\t \t float: left;
\t }
}
/************************************************
WIDESCREEN
************************************************/
@media screen and (min-width: 1200px) {
}\t <div id="articles-sidebar">
\t \t <h2>Search articles archive:</h2>
\t \t <form id="searchbox" method="post">
\t \t \t <input name="searchword" type="text" placeholder="author, title, keyword...">
\t \t \t <input type="submit" value="Search">
\t \t </form>
\t \t <div id="author">
\t \t \t <img id="author-img" src="img/authors/Yannick.jpeg">
\t \t \t <h2 id="author-name">Yannick Šušteršič</h2>
\t \t \t <p id="author-bio">blablablablablabla bla bla bal.</p>
\t \t </div>
\t </div>
\t <div id="articles-feed">
\t </div>
\t <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
\t <script src="js/articles.js"></script>
我想补充到：如果你组织你的CSS正确，这样你永远不会做出过度伸展规则，不会遇到这些问题。杰克逊指出的第一条规则是，“所有h2和p都是＃article-sidebar的后代应该没有空白，没有填充。”它混合了通用标签（h2，p）和语义特定标签（＃articles-sidebar）。在一个地方定义所有通用CSS（h1-h6，p，ul，ol）是一种更好的做法 - 比如UI工具包，然后为特定元素添加自定义样式（＃author-name，＃whatever-else）在它的顶部分开。 – light