Hướng dẫn override parent css from child - ghi đè css cha từ con

Tôi đang tự hỏi làm thế nào để bỏ qua một kiểu cha mẹ và sử dụng kiểu mặc định [không có]. Tôi sẽ hiển thị trường hợp cụ thể của mình làm ví dụ nhưng tôi khá chắc chắn đây là một câu hỏi chung.

#elementId select {
    height:1em;
}



    
        fish
        eat
        cows
    

Những cách tôi không muốn giải quyết vấn đề này:

• Tôi không thể chỉnh sửa biểu định kiểu trong đó "#EuityId chọn" được đặt, mô -đun của tôi sẽ không có quyền truy cập đó.
• Tốt nhất là không ghi đè kiểu chiều cao bằng cách sử dụng thuộc tính kiểu.

Ví dụ, sử dụng Firebug, tôi có thể tắt kiểu cha mẹ và tất cả đều tốt, đây là hiệu ứng tôi đang làm.

Khi một kiểu được đặt, nó có thể bị vô hiệu hóa hoặc nó phải được ghi đè?

Boltclock

679K156 Huy hiệu vàng1365 Huy hiệu bạc1339 Huy hiệu Đồng156 gold badges1365 silver badges1339 bronze badges

Đã hỏi ngày 3 tháng 6 năm 2009 lúc 19:24Jun 3, 2009 at 19:24

Bạn có thể tắt nó bằng cách ghi đè nó như thế này:

height:auto!important;

Trott

62.5K22 Huy hiệu vàng161 Huy hiệu bạc202 Huy hiệu đồng22 gold badges161 silver badges202 bronze badges

Đã trả lời ngày 3 tháng 5 năm 2010 lúc 21:19May 3, 2010 at 21:19

Fabian Brenesfabian BrenesFabian Brenes

7481 Huy hiệu vàng8 Huy hiệu bạc12 Huy hiệu đồng1 gold badge8 silver badges12 bronze badges

5

Nó phải được ghi đè. Bạn đã có thể sử dụng:

#elementId select.funTimes {
   /* Override styles here */
}

Hãy chắc chắn rằng bạn sử dụng cờ

#elementId select.funTimes {
   /* Override styles here */
}

0 theo kiểu CSS, ví dụ:

#elementId select.funTimes {
   /* Override styles here */
}

1 có nghĩa là gì! Có nghĩa là trong CSS?

Bạn có thể sử dụng bộ chọn thuộc tính, nhưng vì điều đó không được hỗ trợ bởi các trình duyệt cũ [đọc IE6, v.v.], nên thêm tên lớp

Dhwaneel

5415 Huy hiệu bạc8 Huy hiệu Đồng5 silver badges8 bronze badges

Đã trả lời ngày 3 tháng 6 năm 2009 lúc 19:26Jun 3, 2009 at 19:26

PatrikakerstrandpatrikakakerstrandPatrikAkerstrand

44.9K11 Huy hiệu vàng78 Huy hiệu bạc94 Huy hiệu đồng11 gold badges78 silver badges94 bronze badges

1

Điều này đã bị va chạm vào đầu vì chỉnh sửa ... Câu trả lời đã trở nên hơi cũ và ngày nay không hữu ích như một giải pháp khác đã được thêm vào tiêu chuẩn.

Bây giờ có một tài sản tốc ký "tất cả".

#elementId select.funTimes {
   all: initial;
}

Điều này đặt tất cả các thuộc tính CSS thành giá trị ban đầu của chúng ... Lưu ý một số giá trị ban đầu là kế thừa; Dẫn đến một số định dạng vẫn diễn ra trên yếu tố.

Do sự tạm dừng đó cần thiết khi đọc mã hoặc xem xét nó trong tương lai, đừng sử dụng nó trừ khi bạn hầu hết là quy trình xem xét là điểm mà lỗi/lỗi có thể được thực hiện! Khi chỉnh sửa trang. Nhưng rõ ràng nếu có một số lượng lớn các thuộc tính cần được đặt lại, thì "tất cả" là con đường để đi.

Tiêu chuẩn là trực tuyến tại đây: //drafts.csswg.org/css-cascade/#all-shorthand

Đã trả lời ngày 28 tháng 12 năm 2018 lúc 7:38Dec 28, 2018 at 7:38

WaynewayneWayne

4.6801 Huy hiệu vàng23 Huy hiệu bạc24 Huy hiệu đồng1 gold badge23 silver badges24 bronze badges

1

Bạn có thể tạo một định nghĩa khác thấp hơn trong bảng kiểu CSS của bạn về cơ bản đảo ngược quy tắc ban đầu. Bạn cũng có thể nối "! Quan trọng" để nói về quy tắc để đảm bảo nó dính.

Đã trả lời ngày 3 tháng 6 năm 2009 lúc 19:33Jun 3, 2009 at 19:33

JasonjasonJason

50.6K37 Huy hiệu vàng129 Huy hiệu bạc185 Huy hiệu Đồng37 gold badges129 silver badges185 bronze badges

Tất cả thuộc tính trong CSS đặt lại tất cả các thuộc tính của phần tử đã chọn, ngoại trừ các thuộc tính hướng và unicode-bidi kiểm soát hướng văn bản.

.module {
  all: unset;
}

Điểm của nó là cho phép đặt lại các phong cách cấp độ thành phần. Đôi khi, nó dễ dàng hơn nhiều để bắt đầu từ đầu với kiểu dáng thay vì chiến đấu chống lại mọi thứ đã có.

/* -------- For Your code -------- */
#elementId select.funTimes {
  all: unset;
}

Đã trả lời ngày 12 tháng 4 năm 2021 lúc 12:20Apr 12, 2021 at 12:20

Bạn nên sử dụng cái này

height:auto!important;

Đã trả lời ngày 27 tháng 5 năm 2015 lúc 7:57May 27, 2015 at 7:57

Tôi đã có một tình huống tương tự khi làm việc trên một trang web Joomla.

Đã thêm một tên lớp vào mô -đun để bị ảnh hưởng. Trong trường hợp của bạn:

Sau đó, thực hiện thay đổi dòng duy nhất sau đây trong CSS. Đã thêm dòng

#elementId div.classname {style to be applied !important;}

làm việc tốt!

Đã trả lời ngày 24 tháng 2 năm 2012 lúc 20:11Feb 24, 2012 at 20:11

Nếu tôi hiểu chính xác câu hỏi: bạn có thể sử dụng

#elementId select.funTimes {
   /* Override styles here */
}

2 trong

#elementId select.funTimes {
   /* Override styles here */
}

3 như thế này

#elementId select.funTimes {
   /* Override styles here */
}

4 và nó sẽ quay lại cài đặt mặc định.

Jeroen

1.1721 Huy hiệu vàng11 Huy hiệu bạc22 Huy hiệu đồng1 gold badge11 silver badges22 bronze badges

Đã trả lời ngày 20 tháng 1 năm 2013 lúc 13:27Jan 20, 2013 at 13:27

elad Silverelad Bạcelad silver

8.6744 Huy hiệu vàng41 Huy hiệu bạc64 Huy hiệu đồng4 gold badges41 silver badges64 bronze badges

Nó sẽ có ý nghĩa đối với CSS để có một cách chỉ cần thêm một kiểu bổ sung [ví dụ, trong phần đầu của trang của bạn, sẽ ghi đè lên bảng kiểu được liên kết] như thế này:

#elementId select {
    /* turn all styles off [no way to do this] */
}

Và tắt tất cả các kiểu được áp dụng trước đó, nhưng không có cách nào để làm điều này. Bạn sẽ phải ghi đè thuộc tính chiều cao và đặt nó thành một giá trị mới trong phần đầu của trang của bạn.but there is no way to do this. You will have to override the height attribute and set it to a new value in the head section of your pages.

#elementId select {
    height:1.5em;
}

Trott

62.5K22 Huy hiệu vàng161 Huy hiệu bạc202 Huy hiệu đồng22 gold badges161 silver badges202 bronze badges

Đã trả lời ngày 3 tháng 5 năm 2010 lúc 21:19Jun 4, 2009 at 20:34

Fabian Brenesfabian Brenes

//drafts.csswg.org/css-cascade/#defaulting-keywords

7481 Huy hiệu vàng8 Huy hiệu bạc12 Huy hiệu đồng

Nó phải được ghi đè. Bạn đã có thể sử dụng:May 19, 2020 at 7:48

Hãy chắc chắn rằng bạn sử dụng cờ

#elementId select.funTimes {
   /* Override styles here */
}

0 theo kiểu CSS, ví dụ:

#elementId select.funTimes {
   /* Override styles here */
}

1 có nghĩa là gì! Có nghĩa là trong CSS?cyberspy

Bạn có thể sử dụng bộ chọn thuộc tính, nhưng vì điều đó không được hỗ trợ bởi các trình duyệt cũ [đọc IE6, v.v.], nên thêm tên lớp10 silver badges13 bronze badges

Dhwaneel

      overrideParentCssRule[elem: HTMLElement, className: string] {
        let cssRules = this.getCSSStyle[className];
        for [let r: number = 0; r < cssRules.length; r++] {
          let rule: CSSStyleRule = cssRules[r];
          Object.keys[rule.style].forEach[s => {
            if [isNaN[Number[s]] && rule.style[s]] {
              elem.style[s] = rule.style[s];
            }
          }];
        }
      }

• Mike Zheng

Đã trả lời ngày 4 tháng 12 năm 2018 lúc 1:03Dec 4, 2018 at 1:03

2