Cách bỏ qua kiểu css cha

Question 1

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

<style>
#elementId select {
    height:1em;
}
</style>

<div id="elementId">
    <select name="funTimes" style="" size="5">
        <option value="test1">fish</option>
        <option value="test2">eat</option>
        <option value="test3">cows</option>
    </select>
</div>

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 đó "#elementId select" đượ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 thuộc tính style.

Ví dụ bằng cách sử dụng firebug, tôi có thể tắt kiểu gốc và tất cả đều tốt, đây là hiệu ứng mà tôi đang hướng tới.

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

Question 2

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

<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">

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

Hãy chắc chắn rằng bạn sử dụng !importantcờ theo kiểu css, ví dụ: margin-top: 0px !important What does! Important nghĩa trong CSS?

Bạn có thể sử dụng công cụ chọn thuộc tính, nhưng vì công cụ này không được các trình duyệt cũ hỗ trợ (đọc IE6, v.v.), tốt hơn nên thêm tên lớp

Question 3

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

chiều cao: auto! important;

Question 4

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

Bây giờ có một thuộc tính viết tắt "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 phần tử.

Do yêu cầu tạm dừng đó khi đọc mã hoặc xem lại mã trong tương lai, đừng sử dụng nó trừ khi bạn quan tâm nhất vì quá trình xem xét là một điểm có thể xảy ra lỗi / lỗi! khi chỉnh sửa trang. Nhưng rõ ràng nếu có một số lượng lớn thuộc tính cần được đặt lại, thì "tất cả" là cách để đi.

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

Question 5

bạn có thể tạo một định nghĩa khác thấp hơn trong biểu định 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ể thêm "! important" vào quy tắc đã nói để đảm bảo quy tắc đó phù hợp.

Question 6

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

chiều cao: auto! important;

Question 7

Tôi đã gặp trường hợp tương tự khi làm việc trên một trang web joomla.

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

<select name="funTimes" class="classname">

sau đó thực hiện thay đổi dòng đơn sau trong css. Đã thêm dòng

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

làm việc tốt!

Question 8

Nếu tôi hiểu câu hỏi một cách chính xác: bạn có thể sử dụng autotrong CSSnhư thế này width: auto;và nó sẽ quay trở lại các thiết lập mặc định.

Question 9

Sẽ có ý nghĩa đối với CSS nếu có một cách đơn giản để thêm một kiểu bổ sung (ví dụ: trong phần đầu của trang của bạn, điều này sẽ ghi đè trang định kiểu được liên kết) chẳng hạn như sau:

<head>
<style>
#elementId select {
    /* turn all styles off (no way to do this) */
}
</style>
</head>

và tắt tất cả các kiểu đã áp dụng trước đó, nhưng không có cách nào để thực hiện việc này . Bạn sẽ phải ghi đè thuộc tính height và đặt nó thành một giá trị mới trong phần đầu của các trang của bạn.

<head>
<style>
#elementId select {
    height:1.5em;
}
</style>
</head>

Question 10

Vui lòng xem tập lệnh dưới đây để áp dụng lại lớp css một lần nữa cho một phần tử để ghi đè vùng chứa mẹ (thường là thành phần khung) các kiểu css và buộc các kiểu tùy chỉnh của bạn. Khung ứng dụng của bạn (có thể là góc / phản ứng, có thể làm điều này để css vùng chứa mẹ được áp dụng lại và không có hiệu ứng mong đợi nào của bạn trong css-class-name đang hiển thị cho phần tử con của bạn. Gọi this.overrideParentCssRule (childElement, ' css-class-name '); để thực hiện những gì khuôn khổ vừa làm (gọi điều này trong trình xử lý sự kiện document.ready hoặc end):

      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 tradrejoe@gmail.com

Question 11

Có một loạt các giá trị có thể được sử dụng để hoàn tác các quy tắc CSS: ban đầu, hủy đặt & hoàn nguyên. Thêm chi tiết từ Nhóm làm việc CSS tại W3C:

https://drafts.csswg.org/css-cascade/#defaults-keywords

Vì đây là 'bản nháp' nên không phải tất cả đều được hỗ trợ đầy đủ, nhưng chưa đặt và viết tắt là trong hầu hết các trình duyệt chính, hoàn nguyên có ít hỗ trợ hơn.