Dlaczego moje właściwości CSS są nadpisywane/ignorowane?

Mam pewne problemy z "hierarchią" CSS (nie jestem pewien, czy można nazwać ją hierarchią). Próbuję narysować poniższy bit HTML.Dlaczego moje właściwości CSS są nadpisywane/ignorowane?

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

Ponieważ zmiany treści odcinek # na każdej stronie mam, chciałam utrzymać spójne style we wszystkich z nich, więc napisałem kilka „globalne” 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; 
}

Chciałem stylu HTML w ul.posts-list inaczej, więc napisałem tych zasad.

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

.item-description { 
    color: #FFF; 
} 

.item-meta { 
    color: #666; 
}

Wystąpiły jednak pewne problemy. Oto jak Chrome renderowania CSS:

Screenshot of how Chrome is rendering my CSS

Z jakiegoś powodu, przepisy są nadrzędne #content p, #content li moje zasady .item-description i .item-meta. Mam wrażenie, że nazwy klasy/id są uważane za konkretne, a zatem o wyższym priorytecie. Wydaje się jednak, że nie rozumiem, jak działa CSS. Co ja tu robię źle?

Edycja: Ponadto, gdzie mogę przeczytać więcej o tym, jak działa ta hierarchia?

Źródło

2012-05-04 kibibyte

Identyfikator elementów ma priorytet w CSS, ponieważ są najbardziej szczegółowe. Po prostu trzeba użyć ID:

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

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

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

Zasadniczo id mieć pierwszeństwo nad klasą którego priorytetem na znaczniki (p, li, ul, h1 ...). Aby zastąpić regułę, po prostu upewnij się, że masz priorytet;)

Źródło

2012-05-04 04:24:00 tibo

+ 1'd dla kodu, ale kilka linków nie może zranić! [oficjalna specyfikacja dotycząca specyfiki] (http://www.w3.org/TR/CSS21/cascade.html#specificity) i [przyjazny arkusz do ściągnięcia] (http://www.stuffandnonsense.co.uk/archives/images/ specificitywars-05v2.jpg) – benesch

+1 za przyjazny arkusz do ściągnięcia lub "jak wyjaśnić specyfikację css dla maniaka"! Doskonały! – tibo

"Hierarchia", w której mierzone są reguły CSS, nazywa się swoistością. Każda część reguły CSS ma rzeczywistą wartość liczbową base-10. Identyfikatory są warte 100 natomiast zajęcia są tylko 10.

Więcej informacji można znaleźć http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Źródło

2012-05-04 04:24:39 jaredhoyt

Kierowanie ID jest bardziej szczegółowy niż kierowanie klas. Bardziej konkretna stylizacja zastąpi mniej konkretną stylizację. Należy zauważyć, że stylizacja w linii w języku HTML jest bardziej szczegółowa i dlatego nadpisuje stylizację ukierunkowaną na ID. Innymi słowy:

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

Dzięki CSS:

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

Tekst pojawi się biały - nie dlatego, że jest najbliżej do kodu html, ale dlatego, że jest wyżej w hierarchii specyficzności. Jeśli usuniesz wewnętrzną stylizację (a normalnie powinieneś uzyskać bardziej przejrzysty kod), tekst będzie czerwony. Usuń identyfikator, a będzie zielony. I wreszcie, gdy klasa zostanie usunięta, będzie niebieska.

Jest to jeden z bardziej skomplikowanych tematów, aby zrozumieć w CSS, a ja tylko zarysowania powierzchni, ale najprostszy opis znalazłem na jak działa CSS specyficzność jest na co sztuczek CSS:

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

Źródło

2014-07-27 21:35:31 Pupchuck

Moją odpowiedzią powinno być „komentarz” na odpowiedź, ale mam właściwą poprawkę chociaż #tibo odpowiedział poprawnie:

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

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

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

reguła !important zastąpi kolejność oceny między id a nd klasa.

Oto link do artykułu, When Using !important is The Right Choice, które pomogą Ci zrozumieć ... to ułatwiły mi życie :)

Źródło

2015-10-28 04:35:41

... tanie edycje .... js ... –

Lepiej przestrzegać standardów CSS. wybierz selektor css i makeit pod jego rodzicem, a następnie nie możesz mieć konfliktów podczas ładowania css fles (jak pliki .css)

Źródło

2016-03-21 18:58:16

Czy możesz opracować lub podać próbkę kodu, co masz na myśli? Nie podążam za tym, co mówisz. – Kmeixner

Dlaczego moje właściwości CSS są nadpisywane/ignorowane?

Odpowiedz

Powiązane problemy