2012-08-24 18 views
7

Tôi muốn sử dụng trình khởi động twitter cho một số trang web mà tôi đang làm việc. Trang web này yêu cầu mẫu được đặt trước sẽ được sử dụng cho một số phần nhất định của trang.Giới hạn Biểu định kiểu cho một thẻ và hậu duệ

Nếu tôi bao gồm biểu định kiểu khởi động twitter, nó sẽ làm hỏng mẫu gốc.

tôi muốn bao gồm các bootstrap.cc stylesheet bên ngoài nhưng làm cho nó chỉ hoạt động trên thẻ mà là một hậu duệ của class = "mycontent"

<html> 
<link href="original stylsheet.css"> 
<link href="bootstrap.css"> 
... 
... 
<div class="header"> 
original stlesheet to be used here 
</div> 
<div class="mycontent"> 
bootstrap css to work for all descendents of my content 
</div> 

Tôi biết một cách là để chỉnh sửa css và thêm. mycontent trước mỗi thẻ. Nhưng tôi đã tự hỏi nếu có một giải pháp thông minh hơn

+0

Bao gồm bootstrap trước stylesheet gốc, vì vậy phong cách của bạn ghi đè lên những người trong bootstrap. – Will

+0

làm việc cho hầu hết các phần .... NHƯNG nó thất bại nếu có một sửa đổi trong bootstrap đó là không có trong bản định kiểu gốc của tôi –

Trả lời

4

Scoped CSS

Nếu scope thuộc tính là hiện tại, sau đó <style> chỉ áp dụng cho nguyên tố mẹ của nó.

<div> 
    <style scoped> 
    /* your css here */ 
    <style> 
    <!-- content --> 
</div> 

Nó thiếu hỗ trợ trình duyệt, nhưng có một polyfill: jQuery Scoped CSS plugin.

Đọc bổ sung: Saving the Day with Scoped CSS.


hỗ trợ trình duyệt hiện tại: http://caniuse.com/#feat=style-scoped

+0

đây là điều gần nhất với những gì tôi đang tìm kiếm !!! Cảm ơn bạn –

0

Như bạn tôi có thể nhìn thấy mã của bạn:

<html> 
<link rel="original stylsheet.css"> 
<link rel="bootstrap.css"> 
... 
... 
<div class="header"> 
original stlesheet to be used here 
</div> 
<div class="mycontent"> 
bootstrap css to work for all descendents of my content 
</div> 

bạn đang sử dụng con đường sai lầm.
bạn nên thử <link href="bootstrap.css">
Tôi hy vọng vấn đề của bạn sẽ được giải quyết với điều này

+0

Ok đó là một lỗi đánh máy ở đây ... câu hỏi của tôi vẫn đứng ... tôi muốn các stylesheet extrenal chỉ ảnh hưởng đến các yếu tố trong nội dung của tôi –

Các vấn đề liên quan