tự CSS dựa trên Selector đặc

Question

tôi đã phân tích một cho tập tin CSS/chuỗi thành một đối tượng JSON như vậy:

{ 
    "#header": { 
     "color": "#000000" 
    }, 
    "#header h1": { 
     "color": "#000" 
    }, 
    "h1": { 
     "color": "#4fb6e5" 
    } 
} 

Những gì tôi muốn làm bây giờ lại sắp xếp chúng dựa trên Specificty là. Trong trường hợp này, #header h1 phải đến sau h1 trong đối tượng JSON vì đây là cách chúng sẽ được áp dụng trong trình duyệt.

Tôi làm cách nào để thực hiện việc này? Có bất kỳ thư viện hiện có nào cho điều này không? Hoặc bất kỳ thư viện hữu ích để giúp đỡ với điều này?

Tôi có thể sử dụng cả Javascript/jQuery hoặc PHP để thực hiện việc này. Tôi đang tìm kiếm lời khuyên thực hiện và hy vọng điều này đã được thực hiện!

Answer 1

câu trả lời ngắn:

Có bất kỳ thư viện hiện có cho việc này?

Không, không phải tôi biết điều đó thực hiện điều này "out-of-the-box" cho bạn.

Hoặc bất kỳ thư viện hữu ích nào để trợ giúp việc này?

Vâng, có json_decode và uksort:

$specificity = function($selector) { 

    /* 
    * @link http://www.w3.org/TR/selectors/#specificity 
    * 
    * 9. Calculating a selector's specificity 
    * 
    * A selector's specificity is calculated as follows: 
    * 
    * * count the number of ID selectors in the selector (= a) 
    * * count the number of class selectors, attributes selectors, and 
    * pseudo-classes in the selector (= b) 
    * * count the number of type selectors and pseudo-elements in the 
    * selector (= c) 
    * * ignore the universal selector 
    * 
    * Selectors inside the negation pseudo-class are counted like any other, 
    * but the negation itself does not count as a pseudo-class. 
    * 
    * Concatenating the three numbers a-b-c (in a number system with a large 
    * base) gives the specificity. 
    */ 
    ... 
    return (int) $result; 
} 

$compare = function($a, $b) use ($specificity) { 
    return $specificity($a) - $specificity($b) 
}; 

$array = json_decode('{"yours" : "json"}', true); 

uksort($array, $compare); 

echo json_encode((object) $array); 

Như mã ví dụ này cho thấy, nó chỉ giải thích làm thế nào để tính toán các đặc trưng trong một chú thích và nó không chứa mã. Đó là bởi vì tôi không có mã đó trong tay, nhưng tôi đã đưa vào đó đặc điểm kỹ thuật làm thế nào điều này được thực hiện (ít nhất là cho CSS 3).

Nếu bạn đang tìm kiếm trình phân tích cú pháp trình chọn CSS, tôi biết về XDOM (vì tôi đã viết nó). Nó có sẵn trên github: https://github.com/hakre/XDOM - Đó là trình phân tích cú pháp CSS CSS tương thích 100% CSS 3.

Theo hiểu biết tốt nhất của tôi, đó là phần lớn những gì bạn nhận được kể từ ngày hôm nay về các giải pháp được tạo sẵn. Tất cả các trình phân tích cú pháp chọn CSS khác mà tôi biết không tương thích với tiêu chuẩn CSS 3 đầy đủ vì chúng không tuân thủ đặc tả W3C. Điều này có thể tốt cho bạn: Nếu bạn không cần tính tương thích CSS3 nghiêm ngặt, bạn có thể tìm thấy một số đoạn mã khác phù hợp với nhu cầu của bạn.

Answer 2

Thực ra có một thuật toán chuẩn để sắp xếp theo độ đặc hiệu, tôi nghĩ bạn có thể muốn xem xét điều đó.

CSS Specificity

Cũng có thể hữu ích một số loại thức heuristic, ví dụ kiểm tra nếu có một hàng đầu # hoặc đếm số lượng khoảng trống và dấu chấm.