css "[class * = my-class] .my-subclass" đang làm gì?

Question

tôi thừa hưởng một số css và tôi đã tìm kiếm khắp nơi trên mạng để hiểu những gì đang được thể hiện bằng một khối css trông giống như:

[class*=wrapper] .logo { 
       padding-top: 32px !important; 
      } 

là dấu hoa thị và dấu ngoặc vuông làm gì vậy?

Thật khó để tìm kiếm [và * trên google ... Xin lỗi nếu câu hỏi là câm.

Answer 1

Nó chọn một phần tử có lớp logo có một tổ tiên có wrapper ở đâu đó trong thuộc tính lớp của nó. Ví dụ lưu ý rằng lớp burgerwrapper cũng dẫn đến phần tử được chọn bên dưới.

[class*=wrapper] .logo { 
 
    color: #f99; 
 
}

<div class="logo">Not selected</div> 
 

 
<div class="wrapper"> 
 
    <div class="logo"> 
 
    Selected 
 
    </div> 
 
</div> 
 

 
<div class="burgerwrapper"> 
 
    <div class="logo"> 
 
    Selected 
 
    </div> 
 
</div>

Xem http://css-tricks.com/attribute-selectors/ đối với một số thông tin cơ bản về bộ chọn thuộc tính.

Answer 2

gì dấu ngoặc vuông làm

Attribute selectors

CSS 2.1 cho phép tác giả để xác định quy tắc phù hợp với các yếu tố có thuộc tính nhất định được quy định trong tài liệu nguồn.

Attribute selectors w3

dấu hoa thị thuộc tính

xâu khớp selectors là gì

[att * = val] Đại diện cho một yếu tố với các thuộc tính att có giá trị chứa ít nhất một thể hiện của chuỗi con "val". Nếu "val" là chuỗi rỗng thì bộ chọn không đại diện cho bất kỳ thứ gì.

Substring matching attribute selectors

Nói tóm lại trong bạn ví dụ:

[class*=wrapper] .logo { 
 
    color: red; 
 
}

<div class="wrapper"> 
 
    <div>not this</div> 
 
    <div class="logo">this</div> 
 
    <div class="logo">this</div> 
 
</div> 
 
<div> 
 
    <div>not this</div> 
 
    <div class="logo">not this</div> 
 
    <div>not this</div> 
 
</div>

Chọn phần tử con với lớp .logo rằng yếu tố phụ huynh của họ có lớp thuộc tính có giá trị wrapper xuất hiện ở đâu đó trong thuộc tính đó.