Вопрос по css, css-selectors – Почему мои свойства CSS переопределяются / игнорируются?

15

У меня есть некоторые проблемы с "иерархией" CSS " (не уверен, правильно ли это называть иерархией). Я пытаюсь стилизовать следующий фрагмент HTML.

<code><body>
  <section id="content">
    <article>
      <ul class="posts-list">
        <li class="post-item">
          <h2>[post title]</h2>
          <p class="item-description">...</p>
          <p class="item-meta">...</p>
        </li>
        ...
      </ul>
    </article>
  </section>
</body>
</code>

Поскольку содержание раздела # изменяется на каждой моей странице, я хотел поддерживать согласованные стили для всех из них, поэтому я написал несколько «глобальных» сообщений. Правила CSS.

<code>#content {
  color: #000;
  margin-left: 300px;
  max-width: 620px;
  padding: 0px 10px;
  position: relative;
}

#content p,
#content li {
  color: #111;
  font: 16px / 24px serif;
}
</code>

Я хотел стилизовать HTML вul.posts-list иначе я написал эти правила.

<code>li.post-item > * {
  margin: 0px;
}

.item-description {
  color: #FFF;
}

.item-meta {
  color: #666;
}
</code>

Однако я столкнулся с некоторыми проблемами. Вот как Chrome отображает CSS:

Screenshot of how Chrome is rendering my CSS

Почему-то правила#content p, #content li отменяют мои правила для.item-description а также.item-meta, У меня сложилось впечатление, что имена классов / идентификаторов считаются конкретными и поэтому имеют более высокий приоритет. Тем не менее, кажется, что я неправильно понимаю, как работает CSS. Что я здесь не так делаю?

Изменить: Кроме того, где я могу прочитать больше о том, как работает эта иерархия?

Ваш Ответ

5   ответов
27

поскольку они являются наиболее конкретными. Вам просто нужно использовать идентификатор:

#content li.post-item > * {
  margin: 0px;
}

#content .item-description {
  color: #FFF;
}

#content .item-meta {
  color: #666;
}

В основном id имеют приоритет над классом, который имеет приоритет над тегами (p, li, ul, h1 ...). Чтобы переопределить правило, просто убедитесь, что у вас есть приоритет;)

+1 за дружественную шпаргалку или "как объяснить специфику css гику"! Отлично!
+1 для кода, но несколько ссылок не повредят!official specification on specificity а такжеfriendly cheat sheet
5

«Иерархия» в котором измеряются правила CSS, называется спецификой.. ID стоит 100, а классы только 10.

Для получения дополнительной информации см.http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

0

но у меня есть правильное исправление, хотя #tibo ответил правильно:

li.post-item > * {
  margin: 0px !important;
}

.item-description {
  color: #FFF !important;
}

.item-meta {
  color: #666 !important;
}

!important Правило переопределит порядок оценки между идентификатором и классом.

Вот ссылка на статью,При использовании! Важным является правильный выбор, это поможет вам понять ... это сделало мою жизнь проще :)

... дешевые правки .... JS ...
1

чем классы таргетинга. Более конкретный стиль перезапишет менее конкретный стиль. Следует отметить, что встроенные стили в HTML более специфичны и поэтому будут перезаписывать стили, ориентированные на идентификаторы. Другими словами:

<p style="color:white" id="itemDescId" class="item-description">...</p>

С помощью CSS:

p{color:blue;}
#itemDescId{color:red;}
.item-description{color:green}

Текст будет отображаться белым - не потому, что он ближе всего к html-коду, а потому, что он выше в иерархии специфичности. Если вы удалите встроенный стиль (как правило, для более понятного и понятного кода), текст станет красным. Удалите удостоверение личности, и оно будет зеленым. И наконец это будет синим, когда класс удален.

Это одна из более сложных тем, которые нужно понять в CSS, и я лишь поверхностно рассматриваю ее, но самое простое описание того, как работает специфика CSS, закончено на уловках CSS:

http://css-tricks.com/specifics-on-css-specificity/

0

выберите css selector и makeit под его родителем, тогда у вас могут не возникнуть конфликты при загрузке css файлов (как .css файлов)

Не могли бы вы уточнить или дать пример кода того, что вы имеете в виду? Я не совсем понимаю, что вы говорите.

Похожие вопросы