Precedência CSS: por que os estilos embutidos são substituídos

Em CSS, os estilos são aplicados a elementos com base na precedência de suas regras. Quando várias regras visam o mesmo elemento, aquela com a precedência mais alta entrará em vigor.

No exemplo fornecido, você tem um estilo embutido que define padding-left: 10px para elementos td dentro de uma tabela com a coluna direita EU IA. No entanto, um estilo de uma folha de estilo referenciada define a margem e o preenchimento como 0 para todos os elementos da classe .rightColumn. O problema é que os estilos da folha de estilo referenciada têm precedência mais alta, fazendo com que os estilos embutidos sejam substituídos.

Calculando a especificidade

A precedência CSS é determinada pela especificidade do regras. A especificidade é calculada com base nos seguintes critérios:

1. As declarações de estilo inline contribuem com 1 ponto para a especificidade (a = 1).
2. Cada ID no seletor contribui com 10 pontos (b = n ).
3. Cada classe ou pseudoclasse no seletor contribui com 1 ponto (c = n).
4. Cada elemento ou pseudoelemento no seletor contribui com 1 ponto (d = n).

Por exemplo, uma regra com o seletor .rightColumn * tem uma especificidade de 0010 (a = 0, b = 0, c = 1, d = 0), enquanto uma regra com o seletor td tem uma especificidade de 0001 (a = 0, b = 0, c = 0, d = 1). Como 0010 é maior que 0001, a regra da folha de estilo referenciada tem precedência mais alta.

Resolvendo o problema

Para resolver esse problema e aplicar os estilos embutidos, você tem duas opções:

1. Use !important: Você pode adicionar !important ao estilo embutido para forçar sua maior importância. No entanto, essa abordagem pode ser difícil de manter e deve ser evitada se possível.
2. Aumentar a especificidade da regra: Você pode adicionar um seletor mais específico ao estilo embutido para aumentar sua especificidade. Por exemplo, você pode adicionar um nome de classe às células da tabela e estilizá-las usando um seletor como .rightColumn .myUnpaddedTable. Dessa forma, a especificidade do estilo inline passa a ser 0011, que é maior que a especificidade da regra da folha de estilo referenciada (0010).