CSS & Kiểu ghi đè trên các yếu tố lồng nhau

Điều này xuất phát từ một câu hỏi khác đã được hỏi here nhưng tôi cho rằng đó là điều có thể có cách tiếp cận "Thực hành tốt nhất".CSS & Kiểu ghi đè trên các yếu tố lồng nhau

Khi thiết kế trang web, nhà thiết kế nhiều khả năng sẽ đặt cùng một tập hợp các kiểu chung cho tất cả các yếu tố trong trang web. (Phông chữ chuẩn cho văn bản bằng Divs/Spans/H1/H2s)

Trong trường hợp bảng, chúng có thể xác định đường viền và sắp xếp trang web mặc định là tốt ... ví dụ:

Table 
{ 
    border: dashed 1px #333333; 
    padding: 2px; 
}

Tuy nhiên nếu bạn có một bảng trong một bảng (từ ví dụ RSolberg 's, một AJAX Calender trong một DataGrid) sau đó cả hai mẹ & bảng lồng nhau của bạn sẽ kế thừa tất cả những phong cách. (Giả sử đó là lý do tại sao chúng được gọi là Cascading)

Câu hỏi của tôi là cách tốt nhất để áp dụng kiểu cho hầu hết các phần tử mà không có phần tử con cũng thừa hưởng chúng.

Nếu bạn chỉ cung cấp ghi đè để xóa bỏ bất kỳ kiểu dáng nào bạn đã áp dụng.

ví dụ:

Table 
{ 
    border: dashed 1px #333333; 
    padding: 2px; 
} 

Table Table 
{ 
    border: solid 0px #000000; 
    padding: 0px; 
}

Nguồn

2009-04-21 Eoin Campbell

Tôi biết cả hai giải pháp này đều hoạt động tốt. Tôi chỉ tự hỏi từ một điểm thiết kế Html/Css xem thực hành tốt nhất là gì. Tôi cho rằng không có Cờ CSS kỳ diệu nào nói rằng "Áp dụng mức N sâu và dừng" –

Nếu bạn có HTML như thế này:.


<html> 
    ... 
    <body> 
    <div> 
     <div> 
     <div> 
    <div> 
    </body> 
</html>

Bạn có thể áp dụng phong cách chỉ với div đó là con của body yếu tố sử dụng bộ chọn con (>) like this:

 body > div { border:solid 1px orange; }

The nested div sẽ không nhận được một biên giới

Để biết thêm thông tin, vui lòng truy cập: http://www.w3.org/TR/CSS2/selector.html#child-selectors.

Xin lưu ý rằng Internet Explorer 6 không hỗ trợ rt the bộ chọn con.

Nguồn

2009-04-21 18:43:20 knut

aha điều này gần hơn với những gì tôi có trong đầu. Vì vậy, bạn có thể chỉ định "phong cách trang web cấp cao nhất" Điều đó sẽ được áp dụng cho các cấu trúc chính của trang web, mà không phải lo lắng về việc sửa đổi nội dung của các yếu tố đó. Cảm ơn knut –

Có. Quy tắc "bảng bảng" sẽ ghi đè quy tắc "bảng" vì đó là more specific. Những gì bạn mô tả là cách tốt nhất để có một kiểu cho bảng ngoài cùng và một kiểu khác cho các bảng bên trong - giả sử không có bảng nào có một lớp hoặc ID cho phép bạn sử dụng nhiều bộ chọn ngữ nghĩa hơn.

Trong thực tế, bạn có nhiều khả năng cần phải sử dụng kỹ thuật này với danh sách.

ol { list-style: upper-roman } 
ol ol { list-style: upper-alpha } 
ol ol ol { list-style: lower-roman } 
ol ol ol ol { list-style: lower-alpha }

Nguồn

2009-04-21 18:30:48

Thêm một lớp hoặc id vào bảng bên ngoài:

<style type="text/css"> 
.outer {border: dashed 1px #333333;} 
</style> 
</head> 
<body> 
    <table class="outer"> 
    <tr><td>before inner table. 
    <table> 
    <tr> 
    <td>Inside inner table.</td> 
    </tr> 
    </table> 
    After inner table. 
    </td> 
    </tr> 
    </table>  
</body>

Xem nó here

Nếu bạn không thể thêm id hoặc các lớp học với HTML và giả sử bảng bạn muốn phong cách không nằm trong một bảng khác, bạn có thể tạo kiểu cho nó bằng cách chỉ định yếu tố nào là con của:

div > table {border: dashed 1px #333333;}

Xem nó here

Mặc dù bộ chọn đó chỉ được triển khai trong IE7 vì vậy nếu bạn cần hỗ trợ IE6, bạn sẽ phải sử dụng phương pháp ghi đè từ câu hỏi.

Nguồn

2009-04-21 18:36:26

Điều đó không phải lúc nào cũng khả thi Sam. Có một số tình huống mà bạn đang đối phó với các điều khiển phía máy chủ để giải mã HTML, nơi phải thêm ID/Tên lớp có thể có nghĩa là viết một số mã OnRender khó sử dụng để giải mã nó. Tôi đang nói về cách thực hành tốt nhất để cung cấp ghi đè ở các cấp độ lồng nhau khác nhau khi không có # ID/.ClassNames để lọc theo –

Đã thêm một cách để làm điều đó mà không cần thêm vào HTML, nhưng cho đến khi IE6 rơi ra khỏi sử dụng nó có thể một thời gian trước khi chúng ta có thể gọi nó là thực hành tiêu chuẩn. –

Tôi đồng ý với ý tưởng ban đầu của bạn về vấn đề này tuy nhiên điều đó phụ thuộc vào hoàn cảnh.

Luôn tạo quy tắc cơ sở và thêm vào biểu định kiểu có ngoại lệ cho quy tắc đó.

Ví dụ: nếu bạn chắc chắn rằng một bảng trong bảng chắc chắn sẽ không bao giờ cần cùng một kiểu được áp dụng cho nó thì hãy sử dụng bộ chọn "bảng bảng" để đặt kiểu. Tuy nhiên, nếu điều đó chỉ có thể xảy ra một lần thì hãy đặt một lớp trên bảng cha và sửa đổi bộ chọn "bảng bảng" của bạn thành một thứ gì đó dọc theo dòng "table.parent table".

Tuy nhiên, "cha mẹ" phải được đổi thành tên mô tả cho phần tử, như lịch như vậy. Bạn không nên đặt tên một lớp học theo một phong cách cụ thể bởi vì nếu kiểu thay đổi nó không còn ý nghĩa nữa.

Nguồn

2009-04-21 18:54:12

CSS & Kiểu ghi đè trên các yếu tố lồng nhau

Trả lời

Các vấn đề liên quan