Thí dụ
Chọn và tạo kiểu cho mọi
yếu tố bên trong
yếu tố
div p {
màu nền. màu vàng;
}
Định nghĩa và cách sử dụng
Bộ chọn phần tử phần tử được sử dụng để chọn phần tử bên trong phần tử
Hỗ trợ trình duyệt
Selectorelement phần tử Yes Yes Yes Yes
Cú pháp CSS
phần tử phần tử {
khai báo css;
} Demo
Một mẹo nhỏ cổ điển dành cho bạn hôm nay. Bạn có biết các khối <style> mà bạn có thể đặt trong <head> của HTML để tạo kiểu không?
Còn gì nữa? . Biểu định kiểu mặc định của tất cả các trình duyệt khiến nó trở thành ________ 4
Nếu bạn di chuyển nó xuống phần nội dung và đặt lại thành display: block;, bạn có thể thấy chính mã đang áp dụng kiểu cho trang đó. Cũng có thể làm cho nó trông đẹp và code-y phải không?
body style { display: block; background: #333; color: white; font: 13px/1.8 Monaco, Mono-Space; padding: 20px; white-space: pre; }Còn gì nữa?
<style scoped contenteditable>body { background: green; }</style>Xem bản trình diễn
Đó là cách tất cả mã trên trang The Shapes of CSS được thực hiện. Nó không chỉ khá gọn gàng mà còn rất hữu ích trên một trang như vậy nên bạn không cần phải duy trì CSS ở hai nơi
Tôi không nghĩ đó là một cách làm tốt nói chung, ngoài các bản trình diễn CSS. Nói chung, các khối <style> mà tôi muốn nói là không tốt trừ khi đó là một tình huống thực sự cụ thể của bên thứ ba, chẳng hạn như trong đó việc thêm kiểu là cách hiệu quả nhất để tạo kiểu cho nội dung của bên thứ ba mới được thêm vào
Ngoài ra, đối với bản ghi, việc sử dụng <style> bên ngoài <head> không phải là không hợp lệ miễn là bạn sử dụng thuộc tính có phạm vi và đó là con đầu tiên của cấp độ gốc của nó. Nếu không thì nó không hợp lệ. Thuộc tính phạm vi (mặc dù hiện tại không có trình duyệt nào được hỗ trợ) được cho là ngụ ý rằng các kiểu bên trong chỉ áp dụng cho phần tử gốc đó và không nơi nào khác. Tìm hiểu thêm về nó