CSS pierwszeństwo

Question

Moja strona zawiera:

<link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
td { 
    padding-left:10px; 
} 
</style> 

Odnośny stylów zawiera:

.rightColumn * {margin: 0; padding: 0;} 

Mam tabelę w rightcolumn ID gdzie chcę komórki mieć trochę wyściółkę. Jednak odwoływany arkusz stylów ma pierwszeństwo przed stylem liniowym. Widzę to wizualnie, a także przez Firebug. Jeśli w instrukcji Firebug wyłączę instrukcję padding:0, zostanie zastosowana lewa podkładka.

Jak uzyskać dostęp do padding-left?

Answer 1

Jak wspomnieli inni, masz problem z konkretnością. Podczas określania, która z dwóch reguł ma pierwszeństwo, silnik CSS zlicza liczbę #id s w każdym selektorze. Jeśli ktoś ma więcej niż drugi, jest używany. W przeciwnym razie kontynuuje porównywanie .class es i s w ten sam sposób. Tutaj masz klasę w regule arkusza stylów, ale nie w regule liniowej, więc pierwszeństwo ma arkusz stylów.

Można to zmienić za pomocą !important, ale jest to bardzo duży młotek do użycia tutaj. Lepiej udoskonalić specyfikę swojej reguły liniowej. Na podstawie Twojego opisu brzmi to, jakby element .rightColumn zawierał lub zawierał table i chciałbyś, aby komórki w tym stole miały dodatkowe odstępy? Jeśli tak, poszukiwany selektor to ".rightColumn td", który jest bardziej szczegółowy niż reguła arkusza stylów i będzie miał pierwszeństwo.

Answer 2

Najprostszym sposobem, aby zmusić go do pracy jest dodanie do CSS, aby zagwarantować jej pierwszeństwo „ważne” (o ile nie masz stwardnienie ważne zasady!):

td { 
    padding-left: 10px !important; 
} 

Jeśli szukasz odpowiedź bez! ważne, należy przeczytać w CSS specificity specifications. Strona z linkami ma dobre objaśnienie, jak to działa, chociaż zasadniczo przechodzi od najważniejszego do najmniejszego, z najważniejszymi selektorami id, selektorami klasy drugimi i selektorami elementów po trzecie.

Answer 3

Spróbuj to zamiast:

td.rightColumn * {margin: 0; padding: 0;} 

td w arkuszu stylów zewnętrznych jest bardziej szczegółowy, więc wygrywa. Jeśli zakwalifikujesz klasę rightColumn z nazwą elementu, zastosowane zostaną style na poziomie strony.

Answer 4

Możesz spróbować dodać! ważna flaga dla twojego wbudowanego css.

np.

td {padding-left: 10px! ważny; }

Również dla ogólnych zasad dotyczących reguł css zamawiającego, rzucić okiem na to:

http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 5

to zrobić:

.rightColumn *, 
td.rightColumn * { 
    margin: 0; 
    padding: 0; 
} 

Pierwszeństwo w CSS jest następująco:

• Jeśli jakaś reguła ma identyfikator, to poprzedza cokolwiek innego.
• Jeśli jakaś reguła ma atrybut class, będzie poprzedzać reguły tylko do tagów.
• Jeśli dwie reguły mają zarówno identyfikatory, jak i znaczniki, to ich liczba oznacza "walkę".

Przykład:

<style type="text/css"> 
    #myid{ 
    padding: 10px; 
    } 

    .class{ 
    padding: 20px; 
    } 
</style> 
<div id="myid" class="class"></div> 

Pomimo, że div ma zarówno identyfikator i klasę, reguła ID zastąpi regułę .class.

Aby dowiedzieć się więcej o priorytetach zasad CSS, polecam http://www.w3.org/TR/CSS2/cascade.html#specificity.

Answer 6

Większość odpowiedzi wskazuje, że jest to problem specyficzności, ale są one niepoprawne lub niepełne w wyjaśnianiu reguł specyficzności.

Zasadniczo w twoim przypadku .rightColoumn * jest "bardziej konkretny" niż td i dlatego reguła wygrywa, nawet jeśli przychodzi wcześniej.

The CSS 2.1 rules are located here. Zasady te są następujące:

• liczba 1, jeśli deklaracja jest z to „styl” przypisywać raczej niż z reguły z selektorem, 0 w przeciwnym przypadku (= a) (W HTML, wartości „styl” atrybutu elementu są Reguły arkusza stylów Te reguły nie mają selektorów, więc a = 1, b = 0, c = 0, i d = 0.)
• policz liczbę atrybutów ID w selektorze (= b)
• policz ilość liczba innych atrybutów i pseudoklas w selektorze (= c)
• policzyć liczbę nazw elementów i pseudoelementów w selektorze (= d)

Łączenie czterech liczb a-b-c-d (w systemie liczbowym o dużej podstawie) nadaje specyfikację.

Więc w twoim przypadku masz dwie zasady:

.rightColumn * {} /* a = 0, b = 0; c = 1, d = 0 : Specificity = 0010*/ 
td {} /* a = 0, b = 0, c = 0, d = 1 : Specificity = 0001 */ 

0001 jest niższa niż 0010, a więc pierwsza zasada wygrywa.

Istnieją dwa sposoby, aby rozwiązać ten problem:

1. Zastosowanie !important zarabiania reguła bardziej „ważne”. Unikałbym tego, ponieważ jest to mylące, gdy masz wiele reguł rozłożonych na kilka plików.
2. Użyj selektora o większej specyficzności dla td, który chcesz zmodyfikować. Możesz dodać do niego nazwę klasy lub identyfikator, co pozwoli ci zastąpić regułę z połączonego pliku CSS.

Przykład:

<style> 
    .rightColomn * { padding: 0; } /* 0010 */ 
    td#myUnpaddedTable { padding: 10px; } /* 0101 */ 
    td.anUnpaddedTable { padding: 10px; } /* 0011 */ 
</style> 

EDIT: Stałe zasady specyficzności względem *. Komentarz Davida zachęcił mnie do ponownego przeczytania specyfikacji, która pokazuje, że selektor * nie wnosi nic do wyniku specyficzności.

Answer 7

ok muszę przyznać, że jestem trochę późno do gry tutaj .. ale 3 lata na Chyba wciąż mogą strzelać do tej pierwszej kolejności odpowiedź ..

dodatkowy sos w moją odpowiedzią jest to, że AN exmaple css z 2 poziomami nazwy klasy.

W poniższym przykładzie widać, że "td" bez klasy uzyskuje styl ".interval td", a td z klasą "indragover" dostaje "tabelę". interwał td.indragover "styl ..

(ten kod jest przeznaczony do przeciągania i upuszczania html, więc jest trochę javascriptu stosującego klasę" indragover "do td w dragenter, dragleave zdarzenia)

// put this in a css file 
.interval { 
    height: 100%; 
    width: 100%; 
    background: #FFFFCC; 
    border: 2px solid #000000; 
    border-collapse: collapse; 
} 

table.interval tr td { 
    border: 2px solid black; 
    color:#112ABB; 
    background: #FFFFCC; 
    height: 20px; 
} 

table.interval td.indragover { 
    background: #AAAA00; 
} 

// put this in a html file 
<table class="interval"> 
<tr><td>blah</td><td class="indragover">blah</td></tr> 
<tr><td class="indragover">blah</td><td>blah</td></tr> 
</table> 

Answer 8

1.div p.bio {font-size: 14px} 
#sidebar p {font-size: 12px} 

Pierwszy wiersz CSS może wydawać się bardziej szczegółowe na pierwszy rzut oka, ale to faktycznie druga linia powyżej, które byłyby bardziej specyficzne dla font-size swojej ust.

An id jest bardziej szczegółowy niż class, który jest bardziej szczegółowy niż element.

2.p {font-size: 12px} 
p.bio {font-size: 14px} 

Druga linia CSS (p.bio) jest bardziej szczegółowy niż pierwszy, gdy chodzi o pkt class="bio".

Poziom pierwszeństwa wynoszący class jest wyższy niż element p.