xử lý và các lớp học với không gian

Question

Tôi có một đoạn như

<p id="para one" class="paragraph one">Content</p> 

Làm sao người ta đại diện cho id và class với các không gian trong css

Khi tôi sử dụng

#para#one{ 
} 

.paragraph.one{ 
} 

Nó không hoạt động với css ở trên.

Answer 1

class="paragraph one" 

thực sự đại diện cho hai lớp khác nhau

id="para one" 

sẽ không hoạt động, nhưng có thể bạn sẽ kết thúc có một id thực tế của para

Answer 2

Bạn không thể có khoảng trắng trong các giá trị id hoặc tên lớp. Khi bạn có khoảng trống trong giá trị của class thuộc tính nó chỉ rõ nhiều lớp áp dụng cho yếu tố đó:

<p class="paragraph one"> <!--Has both "paragraph" and "one" class--> 

Đối với id các giá trị, các quy tắc (HTML4) nêu như sau:

ID và Mã thông báo NAME phải bắt đầu bằng một chữ cái [[A-Za-z]) và có thể là , sau đó là bất kỳ số chữ cái, chữ số ([0-9]), dấu gạch nối ("-"), gạch dưới ("_") , dấu hai chấm (":") và dấu chấm (".").

Như bạn thấy, không gian không hợp lệ. Các HTML5 spec là leniant hơn, nhưng không gian vẫn không được phép (nhấn mạnh thêm):

Thuộc tính id chỉ định định danh duy nhất của phần tử (ID). Giá trị phải là duy nhất trong số tất cả các ID trong subtree home của phần tử và phải chứa ít nhất một ký tự. Giá trị không được chứa bất kỳ ký tự dấu cách nào.

Answer 3

CSS lớp học của bạn là chính xác. Bạn không có một lớp với một không gian trong đó, bạn có hai lớp, "đoạn" và "một". CSS của bạn chọn đúng các yếu tố có cả hai lớp đó:

.paragraph.one { color: red; } 

Đây là một kỹ thuật hữu ích để chia tách các phần tử thành các lớp riêng biệt có thể được kết hợp riêng lẻ. Cũng lưu ý rằng <p class="one paragraph"> sẽ khớp với cùng một bộ chọn.

Answer 4

Bạn chỉ đơn giản là không thể có khoảng trắng. Nếu bạn sử dụng một không gian có nghĩa là bạn đang sử dụng hai lớp khác nhau. Một là para và số còn lại là one.

Answer 5

Chỉ cần bắt gặp bản thân này (tạo kiểu cho trang hiện tại không có cách nào để thay đổi id).

Đây là những gì tôi đã sử dụng để định dạng bởi id:

p[id='para one']{ 
} 

Và, như đã nói trước đây, .paragraph.one chọn hai lớp - điều này có nghĩa là nó cũng sẽ lựa chọn các yếu tố với class=" one paragraph" và class="not a paragraph this one".

Answer 6

Trình duyệt hiện tại thực sự hỗ trợ id có dấu cách. Vì vậy, trên Chrome 54 công trình này:

p#para\ one { 
} 

Và trình duyệt hiện đại không hỗ trợ cú pháp [id="..."], vì vậy

p[id='para one'] { 
} 

không hoạt động trong Chrome 54.