Como seleciono um elemento que tem uma certa classe?

Question

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.

Aqui está um exemplo:

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>

51

html css syntax css-selectors

Author: TylerH, 2013-06-05

Source

4 answers

score 69 · Answer 1

Deve ser por aqui.

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

score 37 · Answer 2

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>

score 10 · Answer 3

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.

score 2 · Answer 4

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