xóa/cài lại css thừa kế từ một thành phần

Question

Tôi biết câu hỏi này đã được hỏi trước đây, nhưng trước khi đánh dấu nó là trùng lặp, tôi muốn nói với bạn rằng tình huống của tôi hơi khác so với những gì tôi tìm thấy trên internet.

Tôi đang xây dựng và tập lệnh nhúng mà mọi người có thể đặt trên trang web của họ. Kịch bản lệnh này tạo ra một div với chiều rộng/chiều cao nhất định và một số thông tin trong đó.

Vấn đề của tôi là một số trang web tuyên bố kiểu cho div được thừa kế bởi div của tôi.

ví dụ:

div{ 
    background-color:red; 
} 

vì vậy nếu tôi không đặt bất kỳ màu nền để div của tôi, nó sẽ hiển thị màu đỏ ngay cả khi tôi không muốn điều đó.

Các giải pháp duy nhất tôi đi cùng là ghi đè lên nhiều chủ sở hữu css, theo cách này div của tôi sẽ hiển thị chính xác như tôi muốn. Vấn đề với giải pháp này là có quá nhiều chủ sở hữu css để ghi đè lên và tôi muốn kịch bản của tôi được ánh sáng như nó có thể được.

Vì vậy, câu hỏi của tôi là nếu bạn biết một giải pháp khác cho vấn đề của tôi. Nó có thể là trong css/javascript/jQuery.

Cảm ơn

Answer 1

"đặt lại" kiểu cho một phần tử cụ thể là không thể, bạn sẽ phải ghi đè tất cả các kiểu bạn không muốn/cần. nếu bạn làm điều này với css trực tiếp hoặc sử dụng jquery để áp dụng các phong cách phụ thuộc vào những gì dễ dàng hơn cho bạn (nhưng tôi sẽ không recommens sử dụng javascript/jquery cho điều này, vì nó hoàn toàn không cần thiết).

Nếu div của bạn là một loại "tiện ích con" có thể được đưa vào các trang web khác, bạn có thể thử bọc nó vào một số iframe. điều này sẽ "đặt lại" kiểu, vì nội dung của nó là một tài liệu khác, nhưng có thể điều này ảnh hưởng đến cách tiện ích của bạn hoạt động (hoặc có thể phá vỡ hoàn toàn) vì vậy điều này có thể không thực hiện được trong trường hợp của bạn.

Answer 2

Một cách tiếp cận đơn giản là sử dụng công cụ sửa đổi !important trong css, nhưng điều này có thể bị ghi đè theo cùng một cách từ người dùng.

Có thể một giải pháp có thể đạt được với jquery bằng cách duyệt toàn bộ DOM để tìm các lớp đã định nghĩa lại và loại bỏ/buộc kiểu CSS.

Answer 3

Miễn là chúng là các thuộc tính như lớp và id, bạn có thể xóa chúng bằng javascript/các công cụ sửa đổi lớp jQuery.

document.getElementById("MyElement").className = ""; 

Không có cách nào để xóa CSS thẻ cụ thể ngoài ghi đè chúng (hoặc sử dụng phần tử khác).

Answer 4

Hãy thử cách này: Tạo đồng bằng div mà không có bất kỳ kiểu hoặc nội dung nào bên ngoài màu đỏ div. Bây giờ bạn có thể sử dụng một vòng lặp trên tất cả các kiểu của đồng bằng div và gán sau đó để bên trong của bạn div để đặt lại tất cả các kiểu.

Tất nhiên điều này không hiệu quả nếu ai đó gán kiểu cho tất cả div s (nghĩa là không sử dụng lớp. CSS sẽ là div { ... }).

Giải pháp thông thường cho các vấn đề như thế này là cung cấp cho lớp học riêng biệt div của bạn.Bằng cách đó, các nhà thiết kế web của các trang web có thể điều chỉnh kiểu dáng của div để vừa với phần còn lại của thiết kế.

Answer 5

Chỉ đặt thuộc tính CSS có liên quan/quan trọng.

Ví dụ (chỉ thay đổi các thuộc tính có thể gây div của bạn trông hoàn toàn khác nhau):

background: #FFF; 
border: none; 
color: #000; 
display: block; 
font: initial; 
height: auto; 
letter-spacing: normal; 
line-height: normal; 
margin: 0; 
padding: 0; 
text-transform: none; 
visibility: visible; 
width: auto; 
word-spacing: normal; 
z-index: auto; 

Chọn một selector rất cụ thể, chẳng hạn như div#donttouchme, <div id="donttouchme"></div>. Ngoài ra, bạn có thể thêm `! Quan trọng trước mỗi dấu chấm phẩy trong khai báo. Khách hàng của bạn đang cố tình làm xáo trộn sự lay chuyển của bạn khi tùy chọn này không thành công.

Answer 6

Bạn có thể thử ghi đè CSS và sử dụng auto

Tôi không nghĩ rằng điều này sẽ làm việc với màu sắc đặc biệt, nhưng tôi chạy vào một vấn đề mà tôi đã có một tài sản cha mẹ như

.parent { 
    left: 0px; 
} 

và sau đó tôi có thể chỉ định con mình với một cái gì đó như

.child { 
    left: auto; 
} 

và nó "đặt lại" tài sản một cách hiệu quả.

Answer 7

bạn có thể sử dụng tùy chọn bên dưới này.

<style> 
    div:not(.no_common_style){ 
     background-color:red; 
    } 
</style> 

bây giờ, nếu bất kỳ nơi nào bạn không muốn áp dụng kiểu mặc định, bạn có thể sử dụng lớp 'no_common_style' làm lớp. ví dụ:

<div class="no_common_style"> 
    It will not display in red 
</div> 

Answer 8

Từ những gì tôi hiểu bạn muốn sử dụng một div được thừa kế từ lớp không nhưng bạn. Như đã đề cập trong phần trả lời trước, bạn không thể hoàn toàn thiết lập lại một thừa kế div. Tuy nhiên, những gì làm việc cho tôi với vấn đề đó là sử dụng một yếu tố khác - một yếu tố không thường xuyên và chắc chắn không được sử dụng trong trang html hiện tại. Một ví dụ tốt, là sử dụng thay vì sau đó tùy chỉnh nó để trông giống như lý tưởng của bạn sẽ.

area { background-color : red; }