Hôm nay, nhiệm vụ của bạn là viết một chương trình (hoặc một hàm) chấp nhận một chuỗi và xuất ra (hoặc trả về) bốn số nguyên.

Đầu vào

Chuỗi đầu vào là một bộ chọn CSS3 và về cơ bản có thể chứa bất kỳ ký tự Unicode nào.

Đầu ra

Đầu ra đại diện cho tính đặc hiệu CSS của bộ chọn này.

• Số đầu tiên luôn là 0 (vì nó được sử dụng cho kiểu nội tuyến và bài tập này không áp dụng cho kiểu nội tuyến)

• Số thứ hai là số id ( #foo) có trong bộ chọn.

• Số thứ ba là số lớp ( .foo), thuộc tính ( [bar]) và lớp giả có trong bộ chọn.

• Số thứ tư là số phần tử ( biz) và phần tử giả có trong bộ chọn.

Ghi chú:

• Bộ chọn phổ quát (*) không được tính ở bất cứ đâu

• Các phần tử giả ::beforevà ::aftercũng có thể được viết bằng một ":" (ký hiệu kế thừa)

• Đầu vào có thể sử dụng lớp :not(selector)giả. Bộ chọn bên trong không được tính, ngay cả khi nó chứa id, lớp, phần tử, ...)

• Những "viên gạch" của bộ chọn được ngăn cách bởi combinators (số lượng / tab, +, >, ~, ví dụ: body > div+a ~*), nhưng họ cũng có thể được tích lũy (ví dụ: div#foo.bar[baz]:hover::before)

• Bạn cũng phải xử lý các chuỗi thoát CSS ( \theo sau là 1 đến 6 số thập lục phân, theo sau là khoảng trắng) và thoát các ký tự đặc biệt ( \theo sau là bất kỳ trong số này !"#$%&'()*+,-./:;<=>?@[\]^`{|}~:). Những lối thoát đó có thể là một phần của bất kỳ khối gạch nào của bộ chọn (id, class, v.v.).

• Bạn không cần phải làm gì đặc biệt nếu bạn nhận được bộ chọn không hợp lệ hoặc bộ chọn CSS4. Đừng bận tâm triển khai trình xác nhận chọn CSS3.

• Dưới đây là một vài liên kết để tìm hiểu thêm về CSS cụ thể:

  • Bài viết về thủ thuật CSS: http://css-tricks.com/specifics-on-css-specificity/
  • Một công cụ (không đầy đủ) tính nó: http://specificity.keegan.st/

Ví dụ

// Phổ cập

* => 0,0,0,0

// TÔI

#id => 0,1,0,0

// Lớp học

. class => 0,0,1,0

// Thuộc tính

[foo] => 0,0,1,0
[foo = "thanh"] => 0,0,1,0
[foo ~ = "thanh"] => 0,0,1,0
[foo ^ = "thanh"] => 0,0,1,0
[foo $ = "thanh"] => 0,0,1,0
[foo * = "thanh"] => 0,0,1,0
[foo | = "thanh"] => 0,0,1,0
[foo = bar] => 0,0,1,0
[foo = 'thanh'] => 0,0,1,0

(NB: ngoặc [] có thể chứa bất cứ thứ gì ngoại trừ "]"

// Lớp giả

: root => 0,0,1,0
: con thứ n (n) => 0,0,1,0
: nth-last-child (n) => 0,0,1,0
: loại thứ n (n) => 0,0,1,0
: nth-last-of-type (n) => 0,0,1,0
: con đầu lòng => 0,0,1,0
: con cuối cùng => 0,0,1,0
: loại đầu tiên => 0,0,1,0
: loại cuối cùng => 0,0,1,0
: chỉ có con => 0,0,1,0
: chỉ loại => 0,0,1,0
: trống => 0,0,1,0
: liên kết => 0,0,1,0
: đã truy cập => 0,0,1,0
: hoạt động => 0,0,1,0
: di chuột => 0,0,1,0
: tập trung => 0,0,1,0
: mục tiêu => 0,0,1,0
: lang (fr) => 0,0,1,0
: đã bật => 0,0,1,0
: bị vô hiệu hóa => 0,0,1,0
: đã kiểm tra => 0,0,1,0
: không (bộ chọn) => 0,0,1,0

(NB: từ khóa sau ":" có thể là bất cứ thứ gì ngoại trừ phần tử giả)


// Các phần tử

cơ thể => 0,0,0,1

// Các phần tử giả

: trước => 0,0,0,1
: sau => 0,0,0,1
:: trước => 0,0,0,1
:: sau => 0,0,0,1
:: dòng đầu tiên => 0,0,0,1
:: chữ cái đầu tiên => 0,0,0,1

(NB: ngoặc đơn () có thể chứa bất cứ thứ gì ngoại trừ dấu ")")

(còn tiếp)

Nếu bạn có câu hỏi hoặc cần ví dụ hoặc dữ liệu thử nghiệm, xin vui lòng hỏi trong các ý kiến.

Mã ngắn nhất (tính bằng byte) thắng.

Chúc may mắn!

Javascript ES6 453 430 byte

Đây là cú đánh của tôi!

a=>(s){var n=z=[],c=[0,0,0,0],e=s.split(/[\s\+\>\~]+/);return e.forEach((s)=>{n=n.concat(s.replace(/\((.*)\)/,"").split(/(?=\[|::|\.)/))}),n.forEach((s)=>{if(0==s.indexOf("::"))return z.push(s);var n=s.split(/(?=:)/);z=z.concat(n[0].split(/(?=[\#])/)),/before|after/.test(n[1])?z.push(":"+n[1]):n[1]&&z.push(n[1])}),z.forEach((s)=>{/^[a-z]+$/gi.test(s)||"::"==s[0]+s[1]?c[3]++:-1!=":.[".indexOf(s[0])?c[2]++:"#"==s[0]&&c[1]++}),c}

@UPDATE mã được cải thiện, bây giờ nó xử lý: không và: trước /: sau khi chọn tốt hơn, tuy nhiên vẫn chưa kiểm tra trình tự thoát CSS.