Why are my CSS properties being overridden/ignored

2019-02-16 09:28发布

站内文章 / HTML/CSS
50 0 0

问题:

I'm having some issues with the CSS "hierarchy" (not sure if it's proper to call it a hierarchy). I'm trying to style the below bit of 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>

Since section#content changes on every page I have, I wanted to maintain consistent styles across all of them, so I wrote some "global" CSS rules.

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

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

I wanted to style HTML within a ul.posts-list differently, so I wrote these rules.

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

.item-description {
  color: #FFF;
}

.item-meta {
  color: #666;
}

However, I ran into some issues. Here is how Chrome is rendering the CSS:

For some reason, the rules #content p, #content li are overriding my rules for .item-description and .item-meta. My impression was that class/id names are considered specific and thus higher priority. However, it seems that I have a misunderstanding of how CSS works. What am I doing wrong here?

Edit: Also, where can I read up more about how this hierarchy works?

回答1:

Elements id have the priority in CSS since they are the most specific. You just have to use the id:

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

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

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

Basically id have the priority on class which the priority on tags(p,li,ul, h1...). To override the rule, just make sure you have the priority ;)



回答2:

The "hierarchy" in which CSS rules are measured is called specificity. Each part of a CSS rule has an actual numerical base-10 value. IDs are worth 100 while classes are only 10.

For more information see http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/



回答3:

Targeting ID's is more specific than targeting classes. More specific styling will overwrite less specific styling. It should be noted that in-line styling in HTML is more specific and will therefore overwrite ID-targeted styling. In other words:

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

With the CSS:

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

The text will appear white - not because it's closest to the html code, but because it's higher in the specificity hierarchy. If you remove the inline styling (and you normally should for cleaner more manageable code), then the text would become red. Remove the ID and it will be green. And finally it will be blue once the class is removed.

This is one of the more complex topics to understand in CSS, and I'm only scratching the surface, but the easiest description I've found on how CSS specificity works is over at CSS tricks:

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



回答4:

Better to follow the CSS standards. choose css selector and makeit under its parent then u may not to get conflicts when loading css fles (like .css files)



回答5:

My response should have been a "comment" on the answer, but I have the correct fix although #tibo answered correctly:

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

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

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

The !important rule will override the order of evaluation between id and class.

Here is a link to an article, When Using !important is The Right Choice, that will help you to understand... it made my life easier :)



标签： css css-selectors
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~