我的页面上有一个侧边栏，我试图将一些自定义CSS应用于该侧边栏，但是由于某种原因，即使正确地级联了，我的裁决也不会覆盖旧规则。知道为什么会这样吗？
我正在使用normalize.css，但我不认为这是问题所在。
我想改变的利润率#author-name和#author-bio。
谢谢您的帮助。
/************************************************
SEARCHBOX
************************************************/
#articles-sidebar {
margin: 0.5em 0;
padding: 1em;
}
#articles-sidebar h2, #articles-sidebar p {
margin: 0;
padding: 0;
}
#articles-sidebar input {
box-sizing: border-box;
padding: 0.5em;
margin: 0.5em 0;
}
#articles-sidebar input[type="submit"] {
border: none;
color: #fff;
background-color: #26A65B;
}
/************************************************
ARTICLES
************************************************/
.article-box {
padding: 0.5em;
margin-bottom: 0.5em;
}
.free {
background-color: #e3f9ec;
}
.members {
background-color: #f5e8f4;
}
.article-categories {
list-style: none;
margin: 0.5em 0 0 0;
padding: 0;
}
.article-category {
margin-right: 0.5em;
padding: 0.2em;
display:inline-block;
/* TODO FIGURE OUT CATEGORY BACKGROUND COLOR */
background-color: #fff;
font-weight: bold;
}
.article-box h1 {
margin: 0.5em 0;
padding: 0;
}
.article-box h3 {
margin: 0;
padding: 0;
}
.article-box p {
margin: 0.5em 0;
padding: 0;
}
.article-box a:link, .article-box a:visited {
text-decoration: none;
color: #26A65B;
}
.article-box a:hover {
color: #913D88;
}
/************************************************
SINGLE ARTICLE PAGE
************************************************/
#articles-feed button {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
display: inline-block;
margin: 1em 0;
}
/************************************************
SINGLE ARTICLE AUTOR
************************************************/
#author-img {
height: 100px;
border-radius: 150px;
border: 1px solid black;
display: block;
margin: 1em 0;
}
#author-name {
margin: 1em 0;
}
/************************************************
TABLET
************************************************/
@media screen and (min-width: 768px) {
}
/************************************************
LAPTOP
************************************************/
@media screen and (min-width: 992px) {
/* LAYOUT */
#articles-sidebar, #articles-feed {
display: inline-block;
}
#articles-sidebar {
width: 25%;
float: right;
}
#articles-feed {
width: 70%;
float: left;
}
}
/************************************************
WIDESCREEN
************************************************/
@media screen and (min-width: 1200px) {
} <div id="articles-sidebar">
<h2>Search articles archive:</h2>
<form id="searchbox" method="post">
<input name="searchword" type="text" placeholder="author, title, keyword...">
<input type="submit" value="Search">
</form>
<div id="author">
<img id="author-img" src="img/authors/Yannick.jpeg">
<h2 id="author-name">Yannick Šušteršič</h2>
<p id="author-bio">blablablablablabla bla bla bal.</p>
</div>
</div>
<div id="articles-feed">
</div>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="js/articles.js"></script>未按预期方式应用边距的原因是因为以下CSS：
#articles-sidebar h2, #articles-sidebar p {
margin: 0;
padding: 0;
}
优先于此CSS：
#author-name {
margin: 1em 0;
}
因为它具有更高的特异性。请查看本文概述CSS中的优先级。
为了更改您的保证金，#author-name您可能需要使用更具体的方法，例如
#articles-sidebar #author-name {
margin: 1em 0;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句