Css hiện lớp ghi đè id
|
Đôi khi tôi đang xem xét mã, tôi khuyên một đồng nghiệp không nên sử dụng ID cho bộ chọn kiểu CSS và chắc chắn sẽ bị hỏi tại sao. Giống như đứng xếp hàng, pha một tách trà hay trang điểm đầy đủ trong bóng tối lúc 6 giờ sáng, tránh ID trong CSS là điều tôi làm mà không cần suy nghĩ. Tôi đã làm việc đó quá lâu mà không đặt câu hỏi, đến nỗi phải mất một phút tôi mới có thể giải thích cho người khác tại sao. Vì vậy, với ý nghĩ đó, đây là danh sách các lý do tại sao tôi tránh sử dụng ID trong biểu định kiểu của mình và thay vào đó thích các lớp hơn Show 1. Độ đặc hiệu của lớp thấp hơn độ đặc hiệu của IDID có tính đặc hiệu cao hơn nhiều so với các lớp. Bản thân một lớp không thể ghi đè lên các kiểu thuộc về một ID. Để "đánh bại" ID, bạn sẽ cần nhiều ID hơn hoặc sử dụng 2. Các lớp có thể được sử dụng lạiID phải là duy nhất trên một trang. Điều này có nghĩa là nếu bạn đính kèm một kiểu vào một ID, thì bạn sẽ không thể sử dụng lại nó trong cùng một trang web. Tuy nhiên, các lớp có thể xuất hiện trên một số phần tử HTML trên cùng một trang. Có thể sử dụng lại các kiểu là một trong những lợi thế của CSS. Ví dụ: sẽ rất khó để tạo kiểu trực tiếp cho phần tử danh sách 3. Quy ước nhất quánSẽ đơn giản hơn cho các nhà phát triển làm việc trong cơ sở mã để biết rằng CSS được đính kèm với các lớp và ID đó được sử dụng cho các mục đích khác. Chỉ sử dụng thuộc tính 4. Một phần tử có thể có nhiều lớp, nhưng chỉ có một IDBạn có thể thêm nhiều lớp vào một phần tử HTML, ví dụ Sử dụng kết hợp các lớp để tạo kiểu cho một phần tử là một mẫu phổ biến. Ngoài ra, bạn nên sử dụng quy ước đặt tên cho các bộ chọn chỉ được sử dụng bởi JavaScript hoặc kiểm tra tự động. Ví dụ: nếu tôi thấy một lớp có tiền tố là từ chối trách nhiệmTất nhiên, lời khuyên này đi kèm với tuyên bố từ chối trách nhiệm thông thường kèm theo. Bạn hiểu mã của mình và bối cảnh của vấn đề hơn bất kỳ bài đăng ngẫu nhiên nào trên blog và nếu bạn nghĩ việc viết CSS bằng ID là hợp lý, thì hãy tiếp tục và sử dụng ID. ID hoàn toàn hợp lệ để sử dụng trong CSS stylesheets Ghi chúĐiều này không có nghĩa là bạn không nên sử dụng ID trong HTML của mình. ID có nhiều công dụng trong trang web ngoài việc là bộ chọn CSS. Ví dụ như neo trang, định danh đoạn hoặc để liên kết nhãn với các trường biểu mẫu P. STrong khi nghiên cứu bài đăng này, tôi đã tìm thấy câu trả lời StackOverflow này khuyến nghị sử dụng ID để xác định kiểu - một lời nhắc tốt rằng các quan điểm phổ biến trong phát triển web giao diện người dùng có thể thay đổi Khi nhiều quy tắc CSS tham chiếu cùng một phần tử HTML, trình duyệt cần một quy tắc ngón tay cái để dự đoán hướng dẫn tạo kiểu nào sẽ được ưu tiên. Điều này được gọi là ghi đè CSS. Tùy thuộc vào loại bộ chọn nào được sử dụng để tạo kiểu cho một phần tử, có một số quy tắc xác định kiểu nào ghi đè kiểu khác Hãy lấy một ví dụ nhỏ để hiểu làm thế nào điều này được thực hiện Trong mẫu mã ở trên, phần tử đoạn chỉ định kiểu dáng trong CSS bên ngoài. Điều này áp dụng cho bất kỳ phần tử đoạn văn nào không chỉ là “Xin chào thế giới. ” đoạn văn. Bây giờ, tôi muốn hiển thị đoạn văn bản hello world của mình khác với tất cả các đoạn khác. Đối với điều này, tôi đang thêm một lớp màu xanh lam như hình bên dưới Bây giờ, màu văn bản thay đổi từ Đỏ sang xanh xác nhận rằng một lớp có tính đặc hiệu cao hơn so với thẻ phần tử Kiến thức phổ biến là kiểu lớp ghi đè kiểu phần tử chung. Nhưng, bạn có biết làm thế nào một phong cách lớp ghi đè lên một phong cách khác. Mẹo nhỏ này sẽ hữu ích khi bạn có nhiều lớp cạnh tranh với nhau để chỉ định kiểu dáng cho một phần tử cụ thể Với các thay đổi trên, màu chữ hello world chuyển từ xanh sang cam. Ghi chú. Bạn có thể chỉ định tên lớp theo bất kỳ thứ tự nào trong thẻ p nhưng quy tắc ghi đè CSS đề xuất rằng thứ tự ưu tiên được cung cấp cho lớp được xác định cuối cùng trong CSS Id ghi đè lớpBộ chọn lớp có thể sử dụng lại. Nói cách khác, nhiều phần tử có thể có cùng tên lớp và do đó, kiểu dáng giống nhau. Ngược lại, HTML không cho phép bạn sử dụng lại ID. Nếu phần tử bạn đang tạo kiểu có cả thuộc tính lớp và id, trong trường hợp đó, kiểu ID sẽ được ưu tiên hơn lớp. Bởi vì các phần tử khác không thể tham chiếu đến cùng một ID, kiểu bộ chọn ID sẽ cụ thể hơn so với một lớp Như mong đợi, màu văn bản xin chào thế giới thay đổi từ màu cam sang màu tím Id ghi đè kiểu nội tuyếnCSS có thể được thêm vào HTML dưới dạng thẻ nội tuyến và khi hoàn tất, kiểu nội tuyến được chỉ định sẽ được ưu tiên hơn các hướng dẫn tạo kiểu khác đã lưu ý ở trên. Bây giờ, hãy viết lại ví dụ hiện tại của chúng ta bằng cách thêm một kiểu nội tuyến vào thành phần đoạn văn trong HTML Với việc bổ sung kiểu nội tuyến, màu văn bản xin chào thế giới thay đổi từ màu tím sang màu xanh lá cây CSS quan trọng ghi đè tất cảQuan trọng là một thuộc tính quan trọng có thể được thêm vào kiểu dáng CSS. Như tên ngụ ý, nó cho biết kiểu dáng mà nó đi kèm là quan trọng và có thể ghi đè kiểu dáng nội tuyến. . quan trọng được thêm vào cuối dòng hướng dẫn tạo kiểu như được thực hiện với ví dụ của chúng tôi bên dưới Văn bản xin chào thế giới hiện được hiển thị bằng màu đỏ vì. quan trọng được thêm vào kiểu thẻ phần tử p sẽ ghi đè tất cả các loại bộ chọn khác ID có được ưu tiên hơn lớp không?Bộ chọn ID được thực hiện trước bộ chọn lớp vì chúng cụ thể hơn. Do đó, họ được ưu tiên .
ID hoặc lớp có ưu tiên CSS không?Bộ chọn ID #first được ưu tiên hơn bộ chọn lớp và thẻ .
ID có cụ thể hơn lớp không?ID cụ thể hơn các lớp và được ưu tiên hơn chúng. Điều này là do ID phải là DUY NHẤT trên mỗi trang. vì vậy về bản chất chúng rất cụ thể. Các lớp có thể xuất hiện nhiều lần. Tìm hiểu cách thức hoạt động của nó là nền tảng để viết mã CSS. |
