Cách loại trừ định dạng CSS?

Question

Bản sao có thể xảy ra:
How do I prevent CSS inheritance?
is there a way to exclude a tag from css class

Tôi có CSS ​​như thế này

.div1 img { 
    // ... 
} 

.myimg { 
    // ... 
} 

và mã HTML của tôi là như thế này,

<div class="div1"> 
    ... 
    <img src="..." class="myimg">  // image html 
    ... 
</div> 

Định dạng css được xác định trong .div1 img rõ ràng được áp dụng cho mã html hình ảnh. Tuy nhiên, tôi thực sự không muốn nó xảy ra. Tôi có thể làm gì để không có các hiệu ứng '.div1 img' trên mã html của hình ảnh đó? Tôi không muốn sửa đổi nội dung của div1 img hoặc mã html liên quan bởi vì nó được sử dụng ở những nơi khác đã có (và nó là một mã mẫu mà tôi không muốn gây rối).

P.S. Tôi không thể xóa hoặc sửa đổi <div class="div1"> do có mã mẫu khác xung quanh.

Cảm ơn.

Answer 1

Bạn có hai lựa chọn:

1. Bạn rõ ràng có thể ghi đè lên tất cả các phong cách được định nghĩa trong .div1 img với những gì họ nên ở trong .myimg
2. Bạn có thể viết .div1 img:not(.myimg) cho quy tắc đầu tiên.

Answer 2

Bạn có thể làm:

.div1 img:not(.myimg) { 
    // ... 
} 

: không chọn giải thích here

Answer 3

bạn cần phải trung hòa tất cả các kiểu bạn đang đưa cho ".div1 img", ví dụ: nếu bạn nói "width: 100px", bạn cần phải nói "width: auto" ở chế độ khác.

Mặc dù nếu bạn có nhiều quy tắc trong tập đầu tiên, nó sẽ rất bẩn theo cách này và bạn cần phải thay đổi bố cục của mình.

Answer 4

Có một chút đẹp not selector sẽ hoạt động, nhưng tiếc là nó không hoạt động trên tất cả các trình duyệt.

Một cách chắc chắn để làm điều đó là xác định lại tất cả các kiểu .div1 trong lớp con của bạn .mying để lớp này ghi đè phụ huynh.

đây là một bản demo ít trong jsfiddle: http://jsfiddle.net/u6MnN/1/

lộn xộn xung quanh với nó và xem những gì là tốt nhất cho bạn.

Answer 5

Nếu bạn có thẻ img bên trong div vùng chứa với lớp .div1, tất nhiên, chúng sẽ có kiểu dáng bạn xác định trong .div1 img, nhưng nếu bạn muốn cho phép nói 2 hình ảnh trong số 8 trong div đó có kiểu khác tin là lý do tại sao bạn làm lớp .myimg), bạn cần phải đặt !quan trọng sau stylings quy định tại .myimg như vậy:

.div1 img 
{ 
    height: 125px; 
    width: 125px; 
} 
.myimg 
{ 
    height: 150px !important; 
    width: 150px !important; 
} 

này chỉ là nếu bạn đang không sử dụng CSS 3.0