0
У меня есть боковая панель на моей странице, на которую я пытаюсь применить некоторый пользовательский CSS, но по какой-то причине мое решение не будет отменять старые, даже если оно правильно каскадировано , Любая идея, почему это происходит?css ruleing не переопределяется при использовании селектора 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) в одном месте - как набор пользовательского интерфейса, а затем добавить пользовательские стили для определенных элементов (# author-name, # whatever-else) поверх нее отдельно. – light