Vc tem que colocar o # na frente de todos os ids
no CSS. Para vc entender melho pq o seu CSS não funcionou eu escreve ele diferente, colocando um ID
em cada linha, como sugere o próprio manual da Google por exemplo https://google.github.io/styleguide/htmlcssguide.html#Selector_and_Declaration_Separation:
#label1,
#label2,
#label3,
#label4 {
color: #FFFFFF;
text-align:left;
font-style: italic;
}
Agora fica mais fácil de vc notar a necessidade de coloca o kbd># na frente do nome de cada id
Essa outra questão sobre ID
pode te interessar tem várias coisas interessantes lá Por que é considerado errado/ruim repetir uma ID em HTML?
Agora sobre o que eu te sugiro e não usar o ID
para colocar estilo em elementos. Eu te sugiro colocar classes, mesmo que o elemento já tenha um ID
, pois IDs
são únicos e como vc viu vc precisa declarar no CSS 4 ids
para usar o mesmo estilo, e com a .classe
vc só precisa de uma .classe
que será aplicada nas labels
. Aqui tem uma questão que tb vale a pena vc parar para ler, vai te ajudar pro resto da vida de dev: O que devo usar no CSS, id ou class?
Então vc teria algo assim:
.class-label {
color: #FF0000;
text-align:left;
font-style: italic;
}
<table>
<tr>
<td><label class="class-label" for="nome1" id="label1">Jogador 1</label></td>
<td><input type="text" name="nome1" id="nome1"></td>
</tr>
<tr>
<td><label class="class-label" for="nome2" id="label1">Jogador 2</label></td>
<td><input type="text" name="nome2"></td>
</tr>
<tr>
<td><label class="class-label" for="nome3" id="label1">Jogador 3</label></td>
<td><input type="text" name="nome3" id="nome3"></td>
...
</table>
DICA
Essa parte é apenas uma dica, apenas outros métodos para vc pegar todas as labels, mas já adianto que para usa-los vc precisa saber exatamente o que está fazendo ou pode ter problemas de hierarquia de classes, conflitos de classes, etc...
Essa definição no CSS pega todas as label
que estão dentro de uma table
table label {
color: #FF0000;
text-align:left;
font-style: italic;
}
Essa definição pega todas as label
que tenho um atributo ID
independente do nome do ID
label[id] {
color: #ff0;
text-align:left;
font-style: italic;
}
E essa definição pega todas as labels
do documento.
label {
color: #ff0;
text-align:left;
font-style: italic;
}
Mas como falei, antes de sair usando o CSS dessa maneira leia o manual que citei no início da resposta, e leia tb os outros links, vão te ajudar muito. Sobre hierarquia de classes vc DEVE ler isso: Qual seletor css tem prioridade?