Bạn có thể tập hợp các tệp CSS để chúng chỉ áp dụng cho các hậu duệ của một phần tử đã cho không?

Question

Với một tệp css, có cách nào để phạm vi toàn bộ tệp sao cho nó chỉ áp dụng cho các phần tử trong một phần tử đã cho:

ví dụ: đưa ra:

<div id="container"> 
    <span class="some_element"/> 
    <!-- etc --> 
</div> 

Có cách nào để phạm vi toàn bộ một file css để áp dụng cho tất cả các yếu tố bên trong "container" mà không thêm vào trước #container cho mọi khoản css đơn?

Answer 1

Tôi không sợ. Một số bộ xử lý trước CSS cho phép bạn viết mã đạt được điều tương tự.

Ví dụ: LESS thực hiện quy tắc lồng nhau:

/* This LESS code... */ 

#header { 
    h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
    p { font-size: 12px; 
    a { text-decoration: none; 
     &:hover { border-width: 1px } 
    } 
    } 
} 

/* ...produces this CSS */ 

#header h1 { 
    font-size: 26px; 
    font-weight: bold; 
} 
#header p { 
    font-size: 12px; 
} 
#header p a { 
    text-decoration: none; 
} 
#header p a:hover { 
    border-width: 1px; 
} 

Và Andy nêu SASS, mà làm điều tương tự.

Answer 2

Không chỉ với CSS, nhưng bạn có thể sử dụng Sass, được biên dịch thành CSS.

Answer 3

Bạn có thể tải trang bằng php và ném bất kỳ thẻ nào bạn muốn theo cách động hoặc làm tương tự với javascript/jQuery ... mặc dù điều đó khá vụng về. Không có phương thức tích hợp để làm điều này vì CSS luôn được áp dụng cho toàn bộ trang.

Answer 4

Bạn có thể sử dụng thuộc tính scoped trên phần tử <style>, mặc dù có rất ít hoặc không hỗ trợ trình duyệt cho nó. Trong ví dụ của bạn:

<div id="container"> 
    <style scoped>.some_element{}</style> 
    <span class="some_element"></span> 
</div> 

Dưới đây là một Polyfill jQuery: http://thingsinjars.com/post/360/scoped-style/

Answer 5

Có 2 cách bạn có thể tiếp cận này:

1) Trong HTML5, (không được hỗ trợ rộng rãi chưa) có trở thành một scoped thuộc tính bạn có thể đặt trên thẻ <style>. Here là một bài viết ngắn về chủ đề này.

2) Bạn có thể sử dụng ngôn ngữ định kiểu động (như LESS hoặc SASS) cho phép bạn lồng các quy tắc CSS liên quan với nhau.

Answer 6

Bạn có thể sử dụng ký pháp đặt tên BEM - http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ ("khối, phần tử, công cụ sửa đổi").

dụ của bạn sẽ trở thành:

<div id="container"> 
    <span class="container__some_element"/> 
    <!-- etc --> 
</div> 

Có, nếu bạn không sử dụng từ viết tắt, bạn đang viết cùng một số nhân vật trong CSS của bạn ... nhưng phong cách của bạn sẽ có ít specificity - - có thể mang lại lợi ích.

Hỗ trợ trình duyệt hy vọng cho <style scoped> sẽ trở nên tốt hơn trong những năm tới!