Pourquoi mes propriétés CSS sont-elles remplacées / ignorées?

Je vais avoir quelques problèmes avec le CSS "hiérarchie" (pas sûr si c'est bien de l'appeler c'est une hiérarchie). Je suis en train de style ci-dessous peu de code HTML.

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

Depuis la section#modifications de contenu sur chaque page que j'ai, j'ai voulu maintenir la cohérence des styles dans tous les cas, j'ai écrit quelques "global" des règles CSS.

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

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

Je voulais style HTML à l'intérieur d'un ul.posts-list différemment, j'ai donc écrit ces règles.

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

.item-description {
  color: #FFF;
}

.item-meta {
  color: #666;
}

Cependant, j'ai rencontré quelques problèmes. Ici est la façon dont google Chrome est rendu le CSS:

Pourquoi mes propriétés CSS sont-elles remplacées /ignorées?

Pour une raison quelconque, les règles #content p, #content li sont impérieuses mes règles pour .item-description et .item-meta. Mon impression était que la classe/id noms sont considérés comme spécifiques et donc une plus grande priorité. Cependant, il semble que j'ai une mauvaise compréhension de la CSS à l'œuvre. Ce que je fais mal?

Edit: Aussi, où puis-je lire plus sur la façon dont cette hiérarchie des œuvres?

source d'informationauteur kibibyte

  1. 25

    Éléments id ont la priorité dans le CSS, car ils sont les plus spécifiques.
    Vous avez juste à utiliser l'id:

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

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

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

    Fondamentalement id ont la priorité sur la classe qui la priorité sur les tags(p,li,ul, h1...). Pour remplacer la règle, assurez-vous d'avoir la priorité 😉

  2. 4

    La "hiérarchie" dans lequel les règles CSS sont mesurés est appelé spécificité. Chaque partie d'une règle CSS dispose d'un véritable numérique en base 10 de la valeur. Les id sont d'une valeur de 100 tandis que les classes ne sont que 10.

    Pour plus d'informations, voir http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

  3. 1

    Ciblage ID est plus spécifique que le ciblage des classes. Plus spécifique style écrasera moins spécifique style. Il convient de noter que, en-ligne style dans le HTML est plus spécifique et donc remplacer ID ciblées style. En d'autres termes:

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

    Avec le CSS:

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

    Le texte apparaîtra blanc - pas parce que c'est plus proche du code html, mais parce que c'est plus élevée dans la spécificité de la hiérarchie. Si vous supprimez la ligne de style (et, normalement, vous devriez le faire pour nettoyeur de plus gérable code), puis le texte qui allait devenir rouge. Enlever les ID et il sera vert. Et enfin, il sera bleu une fois que la classe est supprimée.

    C'est l'un des des sujets plus complexes à comprendre dans le CSS, et je suis seulement gratter la surface, mais la meilleure description que j'ai trouvé sur CSS à la spécificité des œuvres est plus à la CSS astuces:

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

  4. 0

    Mieux de suivre les normes CSS.
    choisissez sélecteur css et makeit en vertu de son parent alors u peut ne pas obtenir les conflits, lors du chargement des css fles (comme .les fichiers css)

  5. 0

    Ma réponse aurait dû être un "commentaire" sur la réponse, mais j'ai du corriger corriger bien que #tibo répondu correctement:

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

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

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

    La !important règle va se substituer à l'ordre de l'évaluation entre les id et class.

    Voici un lien vers un article, Lors De L'Utilisation !important est Le bon Choixqui vous aidera à comprendre... il m'a rendu la vie plus facile 🙂