Question

我的页面上有一个侧边栏，我试图应用一些自定义CSS，但由于某种原因，我的裁决不会覆盖旧的，即使它正确级联。知道为什么会这样吗？

我正在使用normalize.css，但我不认为这是问题所在。

我想更改#author-name和#author-bio上的边距。

感谢您的帮助。

＆＃13;

/************************************************
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) {

}

＆＃13;

	<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>

＆＃13;

Answer 1

未按预期应用保证金的原因是因为这个CSS：

#articles-sidebar h2, #articles-sidebar p {
    margin: 0;
    padding: 0;
}

优先于此CSS：

#author-name {
    margin: 1em 0;
}

因为它具有更高的特异性。查看CSS中的article概述优先级。

为了更改#author-name的边距，您可能需要使用更具体的方法，例如

#articles-sidebar #author-name {
    margin: 1em 0;
}

Answer 2

尝试在你正在编写的规则的最后使用“！important”，虽然它不是一种鼓励的技术，但它可以工作，或尝试从超级父母嵌套它，例如

body #articles-sidebar #author #author-name{
   margin: "write your value here";
}

使用id选择器

2 个答案: