Làm cách nào để ngăn việc kế thừa CSS?

Tôi có menu điều hướng phân cấp trong thanh bên sử dụng danh sách lồng nhau (thẻ <ul> và <li>). Tôi đang sử dụng chủ đề tạo sẵn đã có sẵn kiểu cho các mục danh sách, nhưng tôi muốn thay đổi kiểu cho các mục cấp cao nhất nhưng KHÔNG áp dụng nó cho các mục con. Có cách nào dễ dàng để áp dụng các kiểu cho thẻ mục danh sách cấp cao nhất mà KHÔNG để các kiểu đó xếp tầng xuống các mục danh sách con của nó không? Tôi hiểu rằng tôi có thể thêm rõ ràng các kiểu ghi đè vào các mục con nhưng tôi thực sự muốn tránh phải sao chép tất cả mã kiểu đó nếu có một cách dễ dàng chỉ cần nói "áp dụng các kiểu này cho lớp này và KHÔNG phân tầng chúng xuống bất kỳ phần tử con nào ". Đây là html tôi đang sử dụng:

<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

Vì vậy, CSS có các kiểu cho #sidebar ulvà #sidebar ul liđã có, nhưng tôi muốn thêm các kiểu bổ sung để #sidebar .top-level-navKHÔNG phân chia thành các kiểu con của nó. Có cách nào để thực hiện việc này một cách đơn giản không hay tôi cần phải sắp xếp lại tất cả các kiểu để các kiểu đã #sidebar ulcó bây giờ là cụ thể cho một số lớp nhất định?

Vì chưa có bộ chọn cha nào (hoặc như Shaun Inman gọi chúng là bộ chọn đủ điều kiện ), vì vậy bạn sẽ phải áp dụng kiểu cho các mục danh sách con để ghi đè các kiểu trên các mục danh sách mẹ.

Cascading là toàn bộ điểm của Cascading Style Sheets, do đó có tên.

Bạn có thể sử dụng bộ chọn con

Vì vậy, sử dụng

#parent > child

Sẽ chỉ làm cho trẻ em cấp một để áp dụng các phong cách. Thật không may, IE6 không hỗ trợ bộ chọn con.

Nếu không bạn có thể sử dụng

#parent child child

Để đặt một kiểu cụ thể khác cho trẻ em hơn một cấp độ bên dưới.

Có một thuộc tính được gọi alltrong mô-đun kế thừa CSS3 . Nó hoạt động như thế này:

#sidebar ul li {
  all: initial;
}

Kể từ năm 2016-12, tất cả các trình duyệt, trừ IE / Edge và Opera Mini đều hỗ trợ thuộc tính này.

Bạn có thể sử dụng công cụ chọn * để thay đổi các kiểu con trở về mặc định

thí dụ

#parent {
    white-space: pre-wrap;
}

#parent * {
    white-space: initial;
}

Việc bao bọc bằng iframe khiến css gốc trở nên lỗi thời.

Câu trả lời ngắn gọn là: Không, không thể ngăn việc kế thừa CSS. Bạn chỉ có thể ghi đè các kiểu được đặt trên cha mẹ. Xem thông số kỹ thuật:

Mỗi phần tử trong tài liệu HTML sẽ kế thừa tất cả các thuộc tính có thể kế thừa từ phần tử gốc ngoại trừ phần tử gốc ( html), không có phần tử gốc . - W3C

Ngoài việc ghi đè mọi tài sản được thừa kế. Bạn cũng có thể sử dụng initialtừ khóa, ví dụ color: initial;. Nó cũng có thể được sử dụng cùng với all, ví dụ all: initial;, sẽ thiết lập lại tất cả các thuộc tính cùng một lúc. Thí dụ:

.container {
  color: blue;
  font-style: italic;
}
.initial {
  all: initial;
}

<div class="container">
  The quick brown <span class="initial">fox</span> jumps over the lazy dog
</div>

Bảng hỗ trợ trình duyệt theo Tôi có thể sử dụng ...

• all (Hiện tại không có hỗ trợ trong cả IE và Edge, những thứ khác đều tốt)
• initial (Hiện tại không có hỗ trợ trong IE, những cái khác đều tốt)

Bạn có thể thấy hữu ích bằng cách sử dụng bộ chọn trẻ em trực tiếp> trong một số trường hợp. Thí dụ:

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

Kiểu viền chỉ được áp dụng cho những người con trực tiếp <li>, cũng như bordermột tài sản không được thừa kế. Nhưng màu văn bản đã được áp dụng cho tất cả các phần tử con, cũng như colormột tài sản được thừa kế.

Do đó, >bộ chọn sẽ chỉ hữu ích với các thuộc tính không được kế thừa, khi nói đến việc ngăn kế thừa.

Bạn có thể sử dụng một cái gì đó như jQuery để "vô hiệu hóa" hành vi này, mặc dù tôi khó nghĩ rằng đó là một giải pháp tốt khi bạn nhận được logic hiển thị trong css & javascript. Tuy nhiên, tùy thuộc vào yêu cầu của bạn, bạn có thể thấy css utils của jQuery làm cho cuộc sống của bạn dễ dàng hơn so với thử hacky css, đặc biệt nếu bạn đang cố gắng làm cho nó hoạt động cho IE6

Ví dụ: nếu bạn có hai div trong tài liệu XHTML.

<div id='div1'>
    <p>hello, how are you?</p>
    <div id='div2'>
        <p>I am fine, thank you.</p>
    </div>
</div>

Sau đó, hãy thử điều này trong CSS.

#div1 > #div2 > p{
    color: red;
}

chỉ ảnh hưởng đến đoạn 'div2'.

#div1 > p {
    color: red;
} 

chỉ ảnh hưởng đến đoạn 'div1'.

Bạn không cần tham chiếu lớp cho lis. Thay vì có CSS ​​như

li.top-level-nav { color:black; }

bạn có thể viết

ul#sidebar > li { color:black; }

Điều này sẽ chỉ áp dụng kiểu dáng cho các kiểu lingay lập tức đi xuống từ thanh bên ul.

chỉ cần đặt chúng trở lại mặc định trong bộ chọn "#sidebar ul li"