CSS lớp lặp lại để tăng độ đặc hiệu

Question

Theo các tài liệu CSS: http://www.w3.org/TR/CSS21/cascade.html#specificity

đặc hiệu được xác định bởi (trong số những thứ khác) số lượng các thuộc tính và pseudo-classes trong bộ chọn.

Vì vậy, câu hỏi của tôi là, có thể tăng độ đặc hiệu bằng cách lặp lại cùng một tên lớp nhiều lần không?

Ví dụ:

sẽ

.qtxt.qtxt.qtxt.qtxt.qtxt 
{ 
} 

có tính đặc hiệu cao hơn

.qtxt.lalgn 
{ 
} 

hoặc

.lalgn .qtxt//(space added to create child selector) 
{ 
} 

?

Answer 1

Có, có thể và cố ý như vậy. Trong khi điều này không được đề cập trong spec CSS2, nó được đề cập một cách rõ ràng trong Selectors 3 spec:

Lưu ý: occurrances Lặp đi lặp lại [sic] của bộ chọn đơn giản tương tự được phép và làm tăng độ đặc hiệu.

Do đó trình duyệt phải tăng độ đặc hiệu khi gặp phải selectors đơn giản lặp đi lặp lại, miễn là bộ chọn là hợp lệ và được áp dụng. Điều này không chỉ áp dụng cho các lớp lặp lại, mà còn áp dụng cho các ID, thuộc tính và các lớp giả lặp đi lặp lại.

Với mã của bạn, .qtxt.qtxt.qtxt.qtxt.qtxt sẽ có độ đặc hiệu cao nhất. Hai bộ chọn khác là như nhau cụ thể; combinators không có mang trong các phép tính đặc hiệu ở tất cả:

/* 5 classes -> specificity = 0-5-0 */ 
.qtxt.qtxt.qtxt.qtxt.qtxt 

/* 2 classes -> specificity = 0-2-0 */ 
.qtxt.lalgn 

/* 2 classes -> specificity = 0-2-0 */ 
.lalgn .qtxt 

Ngoài ra, không gian trong bộ chọn cuối cùng của bạn là hậu duệ combinator; các con combinator là >.

Answer 2

Bạn không cần phải hack tính đặc hiệu như thế này ... nếu bạn cần ép buộc giá trị, hãy sử dụng !important.

Answer 3

.qtxt.qtxt.qtxt sẽ có độ đặc hiệu cao nhất ...

http://jsfiddle.net/nXBTp/1/

Tuy nhiên, đây chỉ là những trường hợp nếu bạn lặp lại tên lớp nhiều lần so với bất kỳ chọn khác, ví dụ:

http://jsfiddle.net/nXBTp/2/