2011-11-06 38 views
6

Tôi có các id DIV trong một ứng dụng được tạo động, với ID ở cuối. Ví dụ: <div id="vote_score_72">, <div id="vote_score_73">, <div id="vote_score_74"> v.v.Tên CSS CSS "động"? Cách thêm chúng vào tệp CSS?

Làm cách nào tôi có thể viết id đó trong tệp CSS để tôi có thể áp dụng kiểu cho nó?

+0

Họ có cần phải làm những việc khác nhau cho các ID khác nhau không? – ceejayoz

+1

Giống như bất kỳ ID nào khác, có ký hiệu '#'. ... Bạn có thể cho chúng tôi biết bạn đang thực sự cố gắng làm gì không? Nếu điều này được thực hiện bằng JavaScript, bạn nên có một lớp cho các kiểu phổ biến cho tất cả chúng, sau đó sử dụng thuộc tính 'style' để áp dụng các kiểu của từng mục cụ thể. Nếu tất cả chúng có cùng kiểu, hãy sử dụng các lớp (Google "CSS classes") để thay thế. – Ryan

+0

@ceejayoz no, điều tương tự. Đây là ứng dụng Ruby on Rails hiển thị các câu chuyện khác nhau trong cùng một trang. Mỗi câu chuyện có một điểm số và điểm số được bao bọc trong một DIV với id của câu chuyện ở cuối. –

Trả lời

19

Tiếp tục để đề nghị rằng bạn nên sử dụng các lớp học cho các chức năng này (và bạn nên), bạn thể, thay vào đó, sử dụng thuộc tính-giá trị gia bắt đầu-với selector (điều này có thể không phải là tên chính thức) :

div[id^=vote_score] { 
    color: #f00; 
    /* and so on... */ 
} 

JS Fiddle demo.


Sửa để thêm một liên kết đến Quirksmode.org 's compatibility tables for advanced attribute selectors.

Tài liệu tham khảo:

+0

Cảm ơn David, đã hoạt động hoàn hảo. –

2

Bạn nên thêm một lớp chung cho tất cả các yếu tố này và sử dụng lớp này trong CSS của bạn.

Lớp học là cách tốt nhất để xử lý kiểu chung cho các phần tử khác nhau.

+0

Tôi thấy, giả sử tôi thay đổi id cho một lớp. Làm thế nào tôi có thể viết tên lớp trong tệp CSS? Giống như '.classname_changingnumber' –

+0

Bạn có thể gọi tên lớp bất cứ thứ gì bạn thích, mặc dù việc chọn tên có liên quan đến nội dung/mục đích của' div' sẽ có ý nghĩa. –

+0

@FelipeCerda: không, tên lớp phải là duy nhất cho tất cả div bạn muốn tạo kiểu. Sau đó, bạn có thể tham khảo tên lớp này trong CSS – JMax