Bu CSS seçici nedir? [Sınıf * = “yayılma”]

190

Bu seçiciyi Twitter Bootstrap'ta gördüm:

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

Bu tekniğin ne olduğunu ve ne işe yaradığını bilen var mı?

css css-selectors

— jon
kaynak

1

api.jquery.com/attribute-contains-selector

— biziclop 23:12

1

Birçok harika CSS seçicisi mevcut: w3.org/TR/selectors/#selectors

— Tim Medora

jsbin.com/otizoz/edit#javascript,html,live

— Roko C. Buljan

Benzer ancak tam bir kopya değil, stackoverflow.com/questions/7366323/… (buraya

— bağlanan

332

Bir özellik joker karakter seçici. Verdiğiniz örnekte .show-grid, CONTAINS sınıfına sahip herhangi bir alt öğe arar span.

Yani <strong>bu örnekteki öğeyi seçer :

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

'Şununla başlar ...' için arama da yapabilirsiniz

div[class^="something"] { }

böyle bir şey üzerinde çalışacaktı:

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

ve '... ile biter'

div[class$="something"] { }

hangisi üzerinde çalışacak

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

İyi referanslar

— isNaN1247
kaynak

1

Bunun eski bir yanıt olduğunu biliyorum ama bu referansı referans listesine ekleyeceğim: w3.org/TR/css3-selectors

— Dread Boy

2

İnsanların bunu yararlı bulması durumunda başka bir referans eklemek ister misiniz: AllCssSelectors.com

— user3339411

6

div[class^="something"] { }Seçicinin "ile başlar" tek unsur tek sınıf içeriyorsa çalışır veya birden fazla ise, bu sınıf soldaki ilk olursane.

— Nahn

2

Ben eklersiniz div[class~="something"]uzayda listeleri (örneğin sınıflar) ve maçları birbirinden ayrılarak bulmak için div[class|="something"kısa çizgi üzerinde eşleştirme için liste örneğin eşleşen bir şey ayrılan sana-olan şey sınıfadı yukarıda

— Ruskin

31

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

Sınıf show-grid ile tüm öğeleri seçen, sınıfının ad yayılımını içeren bir alt öğeye sahip olan bir CSS seçici .

— Spikeh
kaynak

15

aslında, " sınıf gösterme ızgarasına sahip tüm öğeler" değil, " sınıfın ismini içeren alt öğe" yi seçer

— Utopik

3

Devamındaki:

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

"span" kelimesini İÇEREN bir sınıfa sahip ".show-grid" öğesinin tüm alt öğelerinin bu CSS özelliklerini edineceği anlamına gelir.

<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>

<span>Kendisi dışında tüm elemanlar vurulur .

Bootstrap ile ilgili olarak:

span6: Bu, Bootstrap 2'nin bir bölümü 12'lik parçalara dayanarak yatay bir ızgaraya bölen iskele tekniğiydi. Bu nedenle span6% 50 genişliğe sahip olacaktı.
Bootstrap'in (v.3 ve v.4) geçerli uygulamasında, artık pencere belirli bir boyutun altına küçüldüğünde yanıt vermeyi işlemek için bir ortam kesme noktası belirten .col-*sınıfları (örn. col-sm-6) Kullanırsınız. Daha fazla belge için Bootstrap 4.1 ve Bootstrap 3.3.7'yi kontrol edin . Bugünlerde daha sonraki bir Bootstrap ile gitmenizi tavsiye ederim

— Tyler
kaynak

2

Sınıf adının bir "span"yerde dize içerdiği tüm öğeleri seçer . Orada da var ^=bir dize başlangıcı için ve $=bir dize sonu için. İşte bazı CSS seçicileri için iyi bir referans: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Ben önyükleme sınıfları ile sadece tanıdık spanXX'in bir tam sayıdır, ama bu başka seçiciler olsaydı erdi içinde span, aynı zamanda bu kurallar kapsamında olacaktır.

Sadece battaniye CSS kurallarının uygulanmasına yardımcı olur.

— Kevin Li
kaynak