Como seleciono um elemento que tem uma certa classe?
o meu entendimento é que o uso de element.class
deve permitir que um elemento específico atribuído a uma classe Receba "estilo" diferente do resto da classe. Esta não é uma questão sobre se isto deve ser usado ou não, mas sim eu estou tentando entender como este selector está destinado a funcionar. Ao olhar para uma tonelada de exemplos na internet, eu acredito que a sintaxe está correta e não entendo por que isso não está funcionando.
CSS:
h2 {
color: red;
}
.myClass {
color: green;
}
h2.myClass {
color: blue;
}
HTML:
<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
<h1>This header should be GREEN to match the class selector</h1>
<h2>This header should be BLUE to match the element.class selector</h2>
</div>
4 answers
h2.myClass
procura h2 com classe myClass
. Mas você realmente quer aplicar o estilo para h2 dentro .myClass
para que você possa usar o selector descendente .myClass h2
.
h2 {
color: red;
}
.myClass {
color: green;
}
.myClass h2 {
color: blue;
}
Demonstração
Este ref dar-te-á uma ideia básica sobre os selectores e dar uma vista de olhos aos selectores descendentes
h2.myClass
refere-se a todos h2
com class="myClass"
.
.myClass h2
refere-se a todos h2
que são filhos de (ou seja, ninhos) elementos com class="myClass"
.
Se quiser que o h2
no seu HTML apareça a azul, mude o CSS para o seguinte:
.myClass h2 {
color: blue;
}
Se quiser ser capaz de referir que h2
por uma classe em vez da sua etiqueta, deve deixar o CSS como está e dar à h2
Uma classe no HTML:
<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
O elemento.o selector de classes é para Situações de estilo como esta:
<span class="large"> </span>
<p class="large"> </p>
.large {
font-size:150%; font-weight:bold;
}
p.large {
color:blue;
}
Tanto o tamanho da letra como o p serão atribuídos ao tamanho da letra e ao peso da letra .grande, mas a cor Azul só será atribuída a p.
Como outros salientaram, o que está a fazer são selectores descendentes.h2.myClass
é apenas Válido para h2
elementos que receberam a classe myClass
directamente atribuída.
Você quer anotar assim:
.myClass h2
Que selecciona todos os filhos de {[3] } que têm o diagnóstico h2