Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Oi gente!
Vi diversos tutoriais e apostilas que falam que o seletor ID é único e não pode ser utilizado mais de uma vez no código HTML.
Eu utilizei mais de 20 seletores ID diferentes, como se fossem classe, e deu certo.
Alguém pode me explicar melhor essa diferença entre classe e id?
Abraços!
Não entendi.
Quer dizer que eu só posso criar um ID e utilizá-lo na página inteira?
E onde posso encontrar uma apostila bacana para iniciar os estudos em javascript, principalmente sobre validação de formulários e esse tipo de coisa?
Tá.. vamos lá..
ID são seletores únicos.
você não pode ter 2 elementos com o mesmo ID numa mesma página.
Mas você pode ter vários IDs diferentes nesta página.
Se você precisar de elementos iguais, você usa class, pois class pode ser aplicada a vários elementos.
>
Tá.. vamos lá..
ID são seletores únicos.
você não pode ter 2 elementos com o mesmo ID numa mesma página.
Mas você pode ter vários IDs diferentes nesta página.
Se você precisar de elementos iguais, você usa class, pois class pode ser aplicada a vários elementos.
Entendi. Tenho esses estilos que gostaria que analisássem:
* {
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, Geneva, Arial;
font-size: 8pt;
color: #FFF;
}
a:link, visted, hover, active {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
ul {
list-style: none;
}
body {
background: #39465A;
}
#mae {
margin: 0 auto;
width: 958px;
height: 900px;
}
#sobre_topo {
background-image: url("../img/site_novo_para_tableless_fatiado_01.gif");
height: 29px;
}
#topo {
background-image: url("../img/site_novo_para_tableless_fatiado_02.gif");
height: 191px;
}
#conteudo {
width: 789px;
height: 579px;
}
#menu_direita {
float: right;
background: #39465A;
height: 579px;
width: 169px;
}
.menu_horizontal {
background-image: url("../img/site_novo_para_tableless_fatiado_03.gif");
height: 41px;
}
.menu_horizontal li:hover {
display: inline-block;
padding: 6px 11px 15px;
margin: 0px 3px 0px 10px;
background: #39465A;
border: solid;
border-color: #313949;
border-width: thin;
height: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.botao_menu_horizontal {
display: inline-block;
padding: 14px 12px 15px;
margin: 0px 3px 0px 10px;
height: 6px;
border-width: thin;
}
.botao_menu_direita {
display: block;
padding: 3px 10px;
margin: 1px 17px;
background: #39465A;
height: 14px;
width: 118px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.menu_direita_sub_a_topo {
background-image: url("../img/site_novo_para_tableless_fatiado_07.gif");
height: 51px;
}
.menu_direita_sub_a_meio {
background-image: url("../img/site_novo_para_tableless_fatiado_08.gif");
padding: 1px 0;
}
.menu_direita_sub_a_meio li:hover {
display: block;
background-color: #262f3c;
}
.menu_direita_sub_b_topo {
background-image: url("../img/site_novo_para_tableless_fatiado_10.gif");
height: 71px;
}
.menu_direita_sub_b_meio {
background-image: url("../img/site_novo_para_tableless_fatiado_11.gif");
padding: 1px 0;
}
.menu_direita_sub_b_meio li:hover {
display: block;
background-color: #262f3c;
}
.menu_direita_sub_c_topo {
background-image: url("../img/site_novo_para_tableless_fatiado_12.gif");
height: 67px;
}
.menu_direita_sub_c_meio {
background-image: url("../img/site_novo_para_tableless_fatiado_17.gif");
padding: 1px 0;
}
.menu_direita_sub_c_meio li:hover {
display: block;
background-color: #262f3c;
}
.menu_direita_sub_d_topo {
background-image: url("../img/site_novo_para_tableless_fatiado_19.gif");
height: 67px;
}
.menu_direita_sub_d_meio {
background-image: url("../img/site_novo_para_tableless_fatiado_20.gif");
padding: 1px 0;
}
.menu_direita_sub_d_meio li:hover {
display: block;
background-color: #262f3c;
}
.menu_direita_sub_rodape {
background-image: url("../img/site_novo_para_tableless_fatiado_21.gif");
height: 16px;
}
.propaganda_a {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_04.gif");
width: 198px;
height: 197px;
}
.propaganda_b {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_05.gif");
width: 191px;
height: 197px;
}
.propaganda_c {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_14.gif");
width: 198px;
height: 177px;
}
.propaganda_d {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_15.gif");
width: 191px;
height: 177px;
}
.propaganda_top_a {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_24.gif");
width: 389px;
height: 125px;
}
.propaganda_top_b {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_25.gif");
width: 400px;
height: 125px;
}
.sub_conteudo_a_topo {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_06.gif");
width: 400px;
height: 62px;
}
.sub_conteudo_a_meio {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_09.gif");
width: 400px;
height: 108px;
}
.sub_conteudo_a_rodape {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_13.gif");
width: 400px;
height: 27px;
}
.sub_conteudo_b_topo {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_16.gif");
width: 400px;
height: 40px;
}
.sub_conteudo_b_meio {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_18.gif");
width: 400px;
height: 109px;
}
.sub_conteudo_b_rodape {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_22.gif");
width: 400px;
height: 28px;
}
.conteudo_limpo_topo {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_26.gif");
height: 43px;
}
.conteudo_limpo_meio {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_27.gif");
height: 11px;
}
.conteudo_limpo_rodape {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_28.gif");
height: 26px;
}
.conteudo_limpo_rodape_b {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_29.gif");
height: 60px;
}Está muito sujo?
E sobre a apostila javascript?
Abraço!
Analisando só o trecho passado, me parece que há classes demais... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif Muitas vezes, apenas com o controle adequado da hierarquia dos elementos, você nem precisa criar classes.
De qualquer forma, só para responder à pergunta inicial, não podemos ter mais de um ID em uma mesma página justamente pelo motivo de que o ID é, como o próprio nome sugere, uma IDentificação. Vamos exemplificar:
Você tem um CPF. Ele é o seu ID, pois não existe outra pessoa com o mesmo ID que o seu. Entretanto, você está matriculado em um curso, cuja turma se chama, por exemplo, 4DW. Essa turma poderia ser considerada uma classe, pois várias pessoas podem pertencer à mesma turma, ou seja, à mesma classe, mas mesmo elas pertencendo à mesma classe, cada um possui um identificador único, que nesse exemplo seria o CPF.
Ficou legal esse exemplo ou "marromeno"?
>
Analisando só o trecho passado, me parece que há classes demais... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif Muitas vezes, apenas com o controle adequado da hierarquia dos elementos, você nem precisa criar classes.
De qualquer forma, só para responder à pergunta inicial, não podemos ter mais de um ID em uma mesma página justamente pelo motivo de que o ID é, como o próprio nome sugere, uma IDentificação. Vamos exemplificar:
Você tem um CPF. Ele é o seu ID, pois não existe outra pessoa com o mesmo ID que o seu. Entretanto, você está matriculado em um curso, cuja turma se chama, por exemplo, 4DW. Essa turma poderia ser considerada uma classe, pois várias pessoas podem pertencer à mesma turma, ou seja, à mesma classe, mas mesmo elas pertencendo à mesma classe, cada um possui um identificador único, que nesse exemplo seria o CPF.
Ficou legal esse exemplo ou "marromeno"?
Você foi muito feliz, Paulo, no exemplo acima.
Valeu!
Agora, sobre a questão do código css sobre o qual perguntei, abaixo está o link para o site em sua forma atual (não terminado):
http://ragnacorp.forbrazil.com.br/siteteste/teste2.html
O código pode ter poucas mudanças, mas a base é aquela.
Você acha que são muitas classes ainda ou dá pra realmente contrair melhor o código?
Eu tenho o problema de que as classes utilizam imagens diferentes de plano de fundo.
Analise aí e vê o que você acha. Abraços!
Posso palpitar também? :P
De fato tem muitas classes. Principalmente as sub_X_top, meio e rodapé. Parece que você acabou de fatiar o layout com editor de imagens e que está usando CADA FATIA para aquilo que ela representa no visual a imagem.
Com CSS não precisa. Tomemos como exemplo o menu direito.
Se você definir que todos aqueles "blocos" terão aquelas caixas arredondadas, você pode cortar uma imagem para fazer o topo e outra para a base delas, que terão as bordas esquerda e direita.
Já o meio da caixa, você pode ou escolher uma cor de fundo (que talvez possa ter problemas de compatibilidade entre navegadores, por não ser uma cor segura) ou definir uma imagem na largura da caixa e repetí-la verticalmente.
Depois, o carinha de cada caixa você coloca no primeiro <LI> da lista usando a tag IMG mesmo, juntamente com o título (Home, Controle, Doações...) e estiliza essa imagem. E se os carinhas tiverem as mesmas dimensões, você cria uma classe que estilize todos e aplica globalmente como img.carinha, por exemplo.
O mesmo vale para o cnteúdo principal:
E por aí vai.
Outra coisa, suas imagens de fatiamento estão nomeadas de forma feia. Simplifique. A garotinha, pode ser girl.extensão, os topos podem ser middleTop.extensão, do menu middleSide.extensão e assim por diante.
Nota: Não precisa seguir a nomenclatura que passei. Eu faço CSS em inglês porque ver palavras em português que levam acentos sem eles me irrita :lol:
Nota 2: Depois que o layout estiver reestruturado, limpo e funcional, você pode passar na sala de Semântica e ver quais tags podem ser alteradas para seguir os padrões e, conseuqnetemente, melhorar seu site na busca.
Espero que isso te ajude.
Valeu Imaggens, suas dicas me ajudaram de tal maneira, que consegui limpar quase 70% do código!
Veja como ficou o link e abaixo o css: http://ragnacorp.forbrazil.com.br/siteteste/teste2.html
* {
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, Geneva, Arial;
font-size: 8pt;
color: #FFF;
}
a:link, visted, hover, active {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
ul {
list-style: none;
}
body {
background: #39465A;
}
#mae {
margin: 0 auto;
width: 958px;
height: 900px;
}
#sobre_topo {
background-image: url("../img/site_novo_para_tableless_fatiado_01.gif");
height: 29px;
}
#topo {
background-image: url("../img/site_novo_para_tableless_fatiado_02.gif");
height: 191px;
}
#conteudo {
width: 789px;
height: 579px;
}
#menu_direita {
float: right;
background: #39465A;
height: 579px;
width: 169px;
}
.menu_horizontal {
background-image: url("../img/site_novo_para_tableless_fatiado_03.gif");
height: 41px;
}
.botao_menu_horizontal li {
display: inline-block;
padding: 14px 12px 15px;
margin: 0px 3px 0px 10px;
height: 6px;
border-width: thin;
}
.botao_menu_horizontal li:hover {
padding: 6px 11px 15px;
margin: 0px 3px 0px 10px;
background: #39465A;
border: solid;
border-color: #313949;
border-width: thin;
height: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.botao_menu_direita li {
display: block;
padding: 3px 10px;
margin: 1px 17px;
background: #39465A;
width: 118px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.botao_menu_direita li:hover {
display: block;
background-color: #262f3c;
}
.menu_direita_sub_meio {
background-image: url("../img/site_novo_para_tableless_fatiado_08.gif");
padding: 1px 0;
}
.menu_direita_sub_a_topo {
background-image: url("../img/site_novo_para_tableless_fatiado_07.gif");
height: 51px;
}
.menu_direita_sub_b_topo {
background-image: url("../img/site_novo_para_tableless_fatiado_10.gif");
height: 71px;
}
.menu_direita_sub_c_topo {
background-image: url("../img/site_novo_para_tableless_fatiado_12.gif");
height: 67px;
}
.menu_direita_sub_d_topo {
background-image: url("../img/site_novo_para_tableless_fatiado_19.gif");
height: 67px;
}
.menu_direita_sub_rodape {
background-image: url("../img/site_novo_para_tableless_fatiado_21.gif");
height: 16px;
}
.propaganda_a {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_04.gif");
width: 198px;
height: 197px;
}
.propaganda_b {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_05.gif");
width: 191px;
height: 197px;
}
.propaganda_c {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_14.gif");
width: 198px;
height: 177px;
}
.propaganda_d {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_15.gif");
width: 191px;
height: 177px;
}
.propaganda_top_a {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_24.gif");
width: 389px;
height: 125px;
}
.propaganda_top_b {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_25.gif");
width: 400px;
height: 125px;
}
.sub_conteudo_a_topo {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_06.gif");
width: 400px;
height: 62px;
}
.sub_conteudo_a_meio {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_09.gif");
width: 400px;
height: 108px;
}
.sub_conteudo_a_rodape {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_13.gif");
width: 400px;
height: 27px;
}
.sub_conteudo_b_topo {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_16.gif");
width: 400px;
height: 40px;
}
.sub_conteudo_b_meio {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_18.gif");
width: 400px;
height: 109px;
}
.sub_conteudo_b_rodape {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_22.gif");
width: 400px;
height: 28px;
}
.conteudo_limpo_topo {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_26.gif");
height: 43px;
}
.conteudo_limpo_meio {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_27.gif");
height: 11px;
}
.conteudo_limpo_rodape {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_28.gif");
height: 26px;
}
.conteudo_limpo_rodape_b {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_29.gif");
height: 60px;
}Simplesmente fui removendo aquele tanto de estilos que estavam só ocupando espaço.
A única desvantagem (eu acho) é que tive que transformar a <ul>, que estava dentro da <div> do menu da direita e continha os botões, em outra <div>, para poder organizar melhor somente um <ul> com classe definida e diversos <li>.
Ficou melhor e mais visível.
Há algum problema em usar <div> dentro de <div> como eu usei?
Abraços!
Ainda dá pra limpar mais :P
Principalmente para o menu. Tenta seguir o que eu te disse e fazer ^cada bloco do menu em apenas três classes e os "carinhas" com uma tag IMG.
Outras coisas que podem ser melhoradas é o efeito quando o mouse passa sobre o menu horizontal. Dá pra fazer com imagens pequenas mesmo onde a âncora (<a>) receb uma e um <span> dentro do link recebe outra. Além de ficar certo, funciona no IEca também.
Porém seu novo uso de listas está um pouco equivocado quanto à publicidade. Listas devem ser usadas para ordenar em lista (duh) e como é muito utilizado, em navegação. Você usou também para estruturar o conteúdo. Prefiro DIV's para isso.
Ainda na questão publicidade você pode eliminar todas essas imagens e trabalhar com cores de fundo e bordas, deixando ainda mais leve.
Quanto menos imagem, melhor. Talvez, com essas novas mudanças você precise até de uma mudança drástica e refatiar todo o seu layout, parte a parte reaproveitando imagens ao invés de criar outras e mais outras só para se adequar à uma largura ou altura.
E também a dica da garota de fundo azul. Faça uma pequena só do tamanho da garota com a cor de fundo e DIV que a contiver, com plano de fundo da mesma cor. Assim, ao carregar, carregará apenas uma imagem nos três locais ao mesmo tempo.
Estou entendendo o que você quer dizer quando se refere a separar o menu em blocos...
Veja se ficou melhor:
http://ragnacorp.forbrazil.com.br/siteteste/teste2.html
Código CSS:
* {
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, Geneva, Arial;
font-size: 8pt;
}
a:link, visted, hover, active {
text-decoration: none;
color: #FFF;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
color: #FFF;
}
ul {
list-style: none;
}
body {
background: #39465A;
}
#mae {
margin: 0 auto;
width: 958px;
height: 900px;
}
#sobre_topo {
background-image: url("../img/site_novo_para_tableless_fatiado_01.gif");
height: 29px;
}
#topo {
background-image: url("../img/site_novo_para_tableless_fatiado_02.gif");
height: 191px;
}
#conteudo {
width: 789px;
height: 579px;
}
#menu_direita {
float: right;
background: #39465A;
height: 579px;
width: 169px;
}
#menu_direita a: hover {
float: right;
background: #39465A;
height: 579px;
width: 169px;
}
.menu_horizontal {
background-image: url("../img/site_novo_para_tableless_fatiado_03.gif");
height: 41px;
}
.botao_menu_horizontal li {
display: inline-block;
padding: 14px 12px 15px;
margin: 0px 3px 0px 10px;
height: 6px;
border-width: thin;
}
.botao_menu_horizontal li:hover {
padding: 6px 11px 15px;
margin: 0px 3px 0px 10px;
background: #39465A;
border: solid;
border-color: #313949;
border-width: thin;
height: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.botao_menu_direita li {
display: block;
padding: 3px 10px;
margin: 1px 17px;
background: #39465A;
width: 118px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.botao_menu_direita li:hover {
display: block;
background-color: #f1d64e;
}
.botao_menu_direita a:hover {
text-decoration: none;
color: #000;
}
.menu_direita_sub {
background-image: url("../img/site_novo_para_tableless_fatiado_08.gif");
padding: 1px 0;
}
.propaganda_a {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_04.gif");
width: 198px;
height: 197px;
}
.propaganda_b {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_05.gif");
width: 191px;
height: 197px;
}
.propaganda_c {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_14.gif");
width: 198px;
height: 177px;
}
.propaganda_d {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_15.gif");
width: 191px;
height: 177px;
}
.propaganda_top_a {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_24.gif");
width: 389px;
height: 125px;
}
.propaganda_top_b {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_25.gif");
width: 400px;
height: 125px;
}
.sub_conteudo_a_topo {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_06.gif");
width: 400px;
height: 62px;
}
.sub_conteudo_a_meio {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_09.gif");
width: 400px;
height: 108px;
}
.sub_conteudo_a_rodape {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_13.gif");
width: 400px;
height: 27px;
}
.sub_conteudo_b_topo {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_16.gif");
width: 400px;
height: 40px;
}
.sub_conteudo_b_meio {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_18.gif");
width: 400px;
height: 109px;
}
.sub_conteudo_b_rodape {
float: left;
background-image: url("../img/site_novo_para_tableless_fatiado_22.gif");
width: 400px;
height: 28px;
}
.conteudo_limpo_topo {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_26.gif");
height: 43px;
}
.conteudo_limpo_meio {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_27.gif");
height: 11px;
}
.conteudo_limpo_rodape {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_28.gif");
height: 26px;
}
.conteudo_limpo_rodape_b {
clear: left;
background-image: url("../img/site_novo_para_tableless_fatiado_29.gif");
height: 60px;
}
Sobre a questão da publicidade, você se refere a tudo que está no conteúdo, correto? Todas aquelas partes devem ser estruturadas em <div>'s, certo?Olá,
Dá para limpar ainda mais pelo menos no atributo do border e da font.
Cumprimentos
Não mudou muita coisa drgomesp
Veja, no Firefox, com a extensão Web Developer Toolbar, tem a opção de desativar imagens. Teste essa página sem imagens pra você ver. O site desaparece 95%
-Não se prenda às classes CSS que arredondam as coisas porque o IEca não as entende.
P.S.: Não precisa postar o CSS, nós podemos ver acesando o arquivo correspondente diretamente.
>
Não mudou muita coisa drgomesp
Veja, no Firefox, com a extensão Web Developer Toolbar, tem a opção de desativar imagens. Teste essa página sem imagens pra você ver. O site desaparece 95%
-Não se prenda às classes CSS que arredondam as coisas porque o IEca não as entende.
P.S.: Não precisa postar o CSS, nós podemos ver acesando o arquivo correspondente diretamente.
Sim, Imaggens, o problema é que sou novo em tableless, não entendo muito pra fazer mudanças desse porte.
Sobre utilizar a tag <img>, você mesmo que me orientou a fazê-lo para colocar os 'carinhas' do menu.
Uma coisa que não sei é como reestruturar o menu, afinal as únicas imagens que ele possui são os carinhas e o fundo. O resto é bloco.
Sobre o corpo da página, o jeito é fatiar novamente, correto? O problema é que o primeiro bloco de propaganda (acima à esquerda) tem borda arredondada. Não saberei trabalhar com esse problema.
Sobre reproveitar classes, creio que fiz corretamente. Ou não?
Ajude-me, se puder e não for inconveniente, de uma forma mais exemplificadora e eficaz, afinal não tenho experiência para interpretar 80% das coisas que você fala.
Agradeço a ajuda e aguardo resposta,
Daniel R G Pereira.
Qndo você estiver trabalhando com Javascript, vai começar a entender isso melhor.
é uma especificação do HTML, que o ID deva trabalhar assim.
Além disso, existe a especifidade, você vai se enrolar na cascata CSS se não souber aplicar.