CSS precedencia

Question

Mi página web contiene:

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

La hoja de estilo que se hace referencia contiene:

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

Tengo una tabla en el ID rightcolumn donde quiera que las células tienen un poco de relleno. Sin embargo, la hoja de estilo referenciada tiene prioridad sobre el estilo en línea. Veo esto visualmente y también a través de Firebug. Si apago la instrucción padding:0 en Firebug, el relleno-izquierda entra en vigencia.

¿Cómo puedo obtener el padding-left para trabajar?

Answer 1

Como han mencionado otros, usted tiene un problema de especificidad. Al determinar cuál de las dos reglas debe tener prioridad, el motor CSS cuenta el número de #id s en cada selector. Si uno tiene más que el otro, se usa. De lo contrario, continúa comparando .class es y tag s de la misma manera. Aquí, tiene una clase en la regla de la hoja de estilo, pero no en la regla en línea, por lo que la hoja de estilo tiene prioridad.

Puede anular esto con !important, pero eso es un martillo muy grande para usar aquí. Es mejor que mejore la especificidad de su regla en línea. Según su descripción, parece que su elemento .rightColumn es o contiene un table y desea que las celdas de esa tabla tengan espaciado adicional. Si es así, el selector que está buscando es ".rightColumn td", que es más específico que la regla de la hoja de estilo y tendrá prioridad.

Answer 2

La forma más fácil de conseguir que funcione es agregar CSS para garantizar su prioridad "importante!" (A menos que tengas múltiples reglas importantes!):

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

Si usted está buscando una respuesta sin! importante, debe leer en CSS specificity specifications. El sitio enlazado tiene una buena explicación de cómo funciona, aunque básicamente va del más importante al menos, con los selectores de identificación más importantes, los selectores de clase en segundo lugar y los selectores de elementos en tercer lugar.

Answer 3

Tal vez puedas probar:

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

El td en la hoja de estilo externa es más específica por lo que gana. Si califica la clase rightColumn con un nombre de elemento, se aplicarán los estilos de nivel de página.

Answer 4

Puede intentar agregar el! bandera importante para su css en línea.

p. Ej.

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

Además, para las reglas generales sobre ordenación de reglas CSS, echar un vistazo a esto:

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

Answer 5

hacer esto:

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

Precedencia en CSS es el siguiente:

• Si alguna regla tiene una ID, entonces precederá a cualquier otra cosa.
• Si alguna regla tiene un atributo de clase, precederá a las reglas de solo etiqueta.
• Si dos reglas tienen identificadores o etiquetas, entonces el número de ellos desata la "pelea".

Ejemplo:

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

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

Aunque el div tiene tanto ID y una clase, la regla de identificación anulará la regla .class.

Para leer más sobre las prioridades de las reglas de CSS, recomiendo http://www.w3.org/TR/CSS2/cascade.html#specificity.

Answer 6

La mayoría de las respuestas son correctas al decir que se trata de un problema de especificidad, pero son incorrectas o incompletas al explicar las reglas de especificidad.

Básicamente en su caso .rightColoumn * es "más específico" que td y por lo que la regla gana a pesar de que viene antes.

The CSS 2.1 rules are located here. Estas reglas son:

• recuento de 1 si la declaración es de un 'estilo' de atributos en lugar de una regla con un selector, 0 en caso contrario (= a) (En HTML, los valores de atributo de "estilo" de un elemento son reglas de hoja de estilo. Estas reglas no tienen selectores, entonces a = 1, b = 0, c = 0 yd = 0)
• cuente el número de atributos de ID en el selector (= b)
• cuente el número de otros atributos y pseudo-clases en el selector (= c)
• cuente el número de nombres de elementos y pseudo-elementos en el selector (= d)

Concatenar los cuatro números a-b-c-d (en un sistema numérico con una base grande) da la especificidad.

Así que en su caso se tienen dos reglas:

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

0001 es inferior a 0010 y por lo tanto la primera regla gana.

Hay dos maneras de solucionar este problema:

1. Uso !important hacer una regla más "importante". Evitaría hacer esto porque es confuso cuando tienes muchas reglas repartidas en varios archivos.
2. Utilice un selector de mayor especificidad para la td que desea modificar. Puede agregarle un nombre de clase o una identificación y esto le permitirá reemplazar la regla del archivo CSS vinculado.

Ejemplo:

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

Editar: fijas las reglas especificidad para *. El comentario de David me impulsó a volver a leer la especificación, lo que sí muestra que el * selector no contribuye en nada al puntaje de especificidad.

Answer 7

bien admito que estoy un poco tarde al juego aquí .. pero en 3 años Creo que todavía puedo disparar para ese primer lugar la respuesta ..

la salsa extra en mi respuesta es que hay una ejemplo de css con 2 niveles de nombre de clase ...

en el ejemplo siguiente puede ver el 'td' sin que ninguna clase tenga el estilo ".interval td" y la clase td con "indragover" obtenga la "tabla". intervalo td.indragover "estilo ...

(este código viene para html arrastrar y soltar por lo que hay algunos javascript que aplican la clase 'indragover' a la td en dragenter, dragleave eventos)

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

La primera línea de CSS podría parecer más específica, a primera vista, pero en realidad es la segunda línea de arriba que sería más específico para el tipo de letra, tamaño de su párrafo.

Un id es más específico que un class, que es más específico que un elemento.

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

La segunda línea de CSS (p.bio) es más específico que el primero cuando se trata de su párrafo class="bio".

el nivel de precedencia de class es mayor que el elemento p.