Dấu hoa thị trước dấu bằng có nghĩa là gì (* =)? Còn dấu chấm than thì sao?

Question

tôi tìm thấy những ký hiệu trong một css:

.nav li ul li a [class*="icol-"] { opacity: 0.5; filter: alpha(opacity=50); padding-top: 4px; } 

.secNav .chzn-container { width: 100%!important; max-width: 100%; } 

gì ý nghĩa của * trước ký hiệu =? Có phải là nhận xét khi sử dụng biểu tượng ! không?

Answer 1

! là một phần của !important; nó là không phải nhận xét. !important bắt buộc áp dụng quy tắc. Nó thường được sử dụng để ghi đè hoặc để ngăn chặn phong cách của bạn bị ghi đè.

*= có nghĩa là "chứa". Vì vậy, trong ví dụ, dòng đầu tiên đang tìm tất cả trẻ em của .nav li ul li a các phần tử có tên lớp chứa "icol-".

Answer 2

element[attribute*="includesthis"] 

Nói cách khác:

<a class="someclassicol-hello">Click me and win a free monkey</a> 

Được kết hợp bởi

a[class*="icol-"] 

Nếu chuỗi xuất hiện bất cứ nơi nào trong các thuộc tính, đó là một trận đấu.

Ngoài ra còn có ^= để bắt đầu và $= cho kết thúc bằng. Read more on this here.

---

!important buộc quy tắc ghi đè lên nhau, nếu không thì không.

a { color: red !important } 
a.blue { color: blue } 

<a class="blue">I'm actually red, because the less specific rule is !important</a> 

Read more on that here. Đặc biệt là bit này:

Khi nào nên !important Được sử dụng?

Cũng như bất kỳ kỹ thuật nào, có ưu và nhược điểm tùy thuộc vào hoàn cảnh. Vì vậy, khi nào nó nên được sử dụng, nếu bao giờ? Dưới đây là tổng quan chủ quan của tôi về việc sử dụng hợp lệ tiềm năng.

KHÔNG BAO GIỜ

!important tờ khai không nên được sử dụng trừ khi họ là hoàn toàn cần thiết sau khi tất cả những con đường khác đã cạn kiệt. Nếu bạn sử dụng, điều quan trọng là lười biếng, để tránh gỡ lỗi thích hợp, hoặc vội vàng hoàn thành dự án, thì bạn đang lạm dụng nó, và bạn (hoặc những người kế thừa dự án của bạn) sẽ phải chịu hậu quả.

Answer 3

Từ W3 recommendation:

[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 các xâu "val". Nếu "val" là chuỗi rỗng thì bộ chọn không đại diện cho bất kỳ thứ gì.

Vì vậy, trong trường hợp của bạn, nó sẽ khớp với bất kỳ phần tử nào có thuộc tính lớp học là).

Answer 4

*= là một selector thuộc tính, xem CSS3 specification

!important phương tiện, rằng các quy tắc được coi là quan trọng bởi tác giả của phong cách và không nên được ghi đè, xem ví dụ CSS2 để được giải thích chi tiết.

Answer 5

Không được nhầm lẫn với ~ chỉ khớp với khoảng trắng xung quanh.

---

[class*="foo"] /* 'fooA bar' */ 

sẽ phù hợp với các lớp chứa foo (có hoặc không có không gian xung quanh nó)

[class~="foo"] /* 'foo bar' */ 

sẽ phù hợp với các lớp chứa foo chỉ với không gian xung quanh nó

---

Ngoài ra còn có:

[class^="foo"] // begins with foo ('fooABC') 
[class$="foo"] // ends with foo ('ABCfoo') 
[class|="foo"] // begins with foo and is separated by a dash ('foo-bar') 

Xem thêm chi tiết ở đây: Complex Selectors