7

作業中のサイトで Twitter ブートストラップを使用したいと考えています。このサイトでは、ページの特定の部分に使用する事前設定されたテンプレートが必要です。

Twitter のブートストラップ スタイルシートを含めると、元のテンプレートが台無しになります。

外部の bootstrap.cc スタイルシートを含めたいが、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>

1 つの方法は、css を編集して、すべてのタグの前に .mycontent を追加することです。しかし、もっとスマートな解決策があるかどうか疑問に思っていました

4

2 に答える 2

5

スコープ指定された CSS

scope属性が存在する場合<style>、その親要素にのみ適用されます。

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

ブラウザーのサポートはありませんが、jQuery Scoped CSS pluginというポリフィルがあります。

追加資料: Scoped CSS で 1 日を節約する。

現在のブラウザ サポート: http://caniuse.com/#feat=style-scoped

于 2012-09-23T15:30:41.973 に答える
-1

あなたがあなたのコードを見ることができるように：

<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>

間違ったパスを使用しています。
あなたは試してみるべきです<link href="bootstrap.css">
私はあなたの問題がこれで解決されることを願っています

于 2012-08-24T13:55:22.297 に答える