O que é este selector CSS? [classe*= "span"]

Eu vi este selector no Twitter Bootstrap: 

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}
Alguém sabe como se chama esta técnica e o que faz?

Author: Wesley Murch, 2012-03-23
Source

4 answers

É um selector de caracteres especiais de atributos. Na amostra que você deu, ele procura qualquer elemento criança Sob .show-grid que tem uma classe que contém span.

Assim, seleccionaria o elemento <strong> Neste exemplo: 

<div class="show-grid">
    <strong class="span6">Blah blah</strong>
</div>

Você também pode fazer buscas para ' começa com...'

div[class^="something"] { }
Que funcionaria em algo assim. 
<div class="something-else-class"></div>

E ' termina com...'

div[class$="something"] { }

Que funcionaria em 

<div class="you-are-something"></div>

Bom. referências

 341
Author: isNaN1247, 2015-04-18 18:29:05 
.show-grid [class*="span"]

É um selector de CSS que selecciona todos os elementos com a classe show-grid que tem um elemento-filho cuja classe contém o nome span.

 31
Author: Spikeh, 2020-12-31 17:43:31

O Seguinte:

.show-grid [class*="span"] {

Significa que todos os elementos filhos de".show-grid 'com uma classe que contém a palavra 'span' nela irá adquirir essas propriedades CSS.

<div class="show-grid">
  <div class="span">.span</div>
  <div class="span6">span6</div>
  <div class="attention-span">attention</div>
  <div class="spanish">spanish</div>
  <div class="mariospan">mariospan</div>
  <div class="espanol">espanol</div>

  <div>
    <div class="span">.span</div>
  </div>

  <p class="span">span</p>
  <span class="span">I do GET HIT</span>

  <span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>

<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>

Todos os elementos são atingidos excepto o {[[2]} por si só.


Em relação ao Bootstrap:

  • Esta foi a técnica de andaimes do Bootstrap 2, que dividiu uma secção numa grelha horizontal, baseada em partes de 12. Assim span6 teria uma largura de 50%.
  • na implementação actual do Bootstrap (v. 3 e v. 4), você agora usa as classes .col-* (por exemplo col-sm-6), que também especifica um ponto de paragem para lidar com a resposta quando a janela encolhe abaixo de um determinado tamanho. Verifique Bootstrap 4, 1 e Bootstrap 3, 3, 7 para mais documentação. Eu recomendaria ir com um Bootstrap mais tarde hoje em dia
 4
Author: Tyler, 2018-12-03 21:31:30

Selecciona todos os elementos onde o nome da classe contém o texto "span" algures. Há também ^= para o início de uma cadeia, e $= para o fim de uma cadeia. Aqui está uma boa referência para alguns selectores de CSS.

Só estou familiarizado com as classes de bootstrap spanX onde X é um inteiro, mas se houvesse outros selectores que acabaram em span, também cairia sob estas regras.

Só ajuda aplicar as regras gerais da CSS.
 2
Author: Kevin Li, 2020-12-31 17:45:55