Bộ chọn CSS này là gì? [class * = hung span]

Tôi đã thấy bộ chọn này trong Twitter Bootstrap:

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

Có ai biết kỹ thuật này được gọi là gì và nó làm gì không?

Đây là một bộ chọn ký tự đại diện. Trong mẫu bạn đã đưa ra, nó tìm kiếm bất kỳ phần tử con nào trong .show-gridđó có một lớp CONTAIN span.

Vì vậy, sẽ chọn <strong>phần tử trong ví dụ này:

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

Bạn cũng có thể thực hiện tìm kiếm 'bắt đầu bằng ...'

div[class^="something"] { }

mà sẽ làm việc trên một cái gì đó như thế này: -

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

và 'kết thúc bằng ...'

div[class$="something"] { }

mà sẽ làm việc trên

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

Tài liệu tham khảo tốt

• Bộ chọn thuộc tính CSS3: Kết hợp chuỗi con
• 30 bộ chọn CSS bạn phải ghi nhớ
• Bộ chọn CSS3 W3C

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

Đó là một bộ chọn CSS chọn tất cả các thành phần với lưới hiển thị lớp , có một phần tử con mà lớp chứa khoảng tên .

Sau đây:

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

có nghĩa là tất cả các phần tử con của '.show-lưới' với một lớp CONTAIN từ 'span' trong nó sẽ thu được các thuộc tính 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>

Tất cả các yếu tố bị tấn công ngoại trừ <span>chính nó.

Trân trọng Bootstrap:

• span6: đây là kỹ thuật giàn giáo của Bootstrap 2, chia một phần thành lưới ngang, dựa trên các phần của 12. Do đó span6sẽ có chiều rộng 50%.
• Trong triển khai Bootstrap ngày nay (v.3 và v.4), bây giờ bạn sử dụng các .col-*lớp (ví dụ col-sm-6), cũng chỉ định một điểm dừng phương tiện để xử lý phản hồi khi cửa sổ co lại dưới một kích thước nhất định. Kiểm tra Bootstrap 4.1 và Bootstrap 3.3.7 để biết thêm tài liệu. Tôi khuyên bạn nên đi với một Bootstrap sau ngày hôm nay

Nó chọn tất cả các phần tử trong đó tên lớp chứa chuỗi "span"ở đâu đó. Ngoài ra còn có ^=phần đầu của chuỗi và $=phần cuối của chuỗi. Đây là một tài liệu tham khảo tốt cho một số bộ chọn CSS: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selector-you-must-memorize/

Tôi chỉ quen thuộc với các lớp bootstrap spanXtrong đó X là một số nguyên, nhưng nếu có được bộ chọn khác mà kết thúc trong span, nó cũng sẽ giảm theo các quy tắc.

Nó chỉ giúp áp dụng các quy tắc CSS chăn.