Co to jest selektor CSS? [class*= " span"]

Widziałem tego selektora w Twitter Bootstrap: 

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}
Czy ktoś wie jak nazywa się ta technika i do czego służy?
Author: Wesley Murch, 2012-03-23
Source

4 answers

To selektor atrybutów wieloznacznych. W podanej próbce wyszukuje ona dowolny element potomny w .show-grid, który ma klasę zawierającą span.

Więc wybierz <strong> element w tym przykładzie: 

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

Możesz również wyszukiwać 'zaczyna się od...'

div[class^="something"] { }

Które by działały na czymś takim:-

<div class="something-else-class"></div>

I kończy się na...'

div[class$="something"] { }

Które by działały na 

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

Dobre referencje

 341
Author: isNaN1247,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-18 18:29:05 
.show-grid [class*="span"]

Jest to selektor CSS, który wybiera wszystkie elementy z klasą show-grid, która ma element potomny, którego klasazawiera nazwęspan .

 31
Author: Spikeh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-31 17:43:31

Następujące: 

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

Oznacza, że wszystkie elementy potomne '.show-grid 'z klasą, która zawiera słowo "span" w nim nabywa te właściwości 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>
Wszystkie elementy zostają trafione, z wyjątkiem <span> samego siebie.


W odniesieniu do Bootstrap:

  • span6: była to technika rusztowania Bootstrap 2, która dzieliła odcinek na poziomą siatkę, opartą na częściach 12. Tak więc span6 / width = " 50%" /
  • w bieżącej implementacji Bootstrap (V. 3 i V. 4), używasz teraz klas .col-* (np. col-sm-6), które również określają punkt przerwania nośnika do obsługi responsywności, gdy okno kurczy się poniżej określonego rozmiaru. Sprawdź Bootstrap 4.1 i Bootstrap 3.3.7, aby uzyskać więcej dokumentacji. Polecam iść z późniejszym Bootstrap obecnie
 4
Author: Tyler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-03 21:31:30

Wybiera wszystkie elementy, w których nazwa klasy zawiera gdzieś łańcuch "span". Istnieje również ^= dla początku łańcucha i $= dla końca łańcucha. Oto Dobra Referencja dla niektórych selektorów CSS.

Znam tylko klasy bootstrap spanX gdzie X jest liczbą całkowitą, ale gdyby istniały inne selektory, które kończyły się W span, również podlegałyby tym regułom.

To po prostu pomaga zastosować ogólne reguły CSS.

 2
Author: Kevin Li,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-31 17:45:55