如何將css作用於div而不在scope標籤上放置作用域？

我迫切需要將我的CSS作爲特定的div。如何將css作用於div而不在scope標籤上放置作用域？

我想要的是，我的風格在某個div內隻影響該div內的任何內容，並且除此之外沒有任何內容。

例子：

 <style> 
      p { 
       color: red; 
      } 
     </style> 
     <div class="global"> 
      <p>I am styled by the global styling!</p> 
     </div> 
     <div class="scoped"> 
      <style> 
       p{ 
        color: blue; 
        background: green; 
       } 
      </style> 
      <p>These scoped styles do not affect the global styles</p> 
     </div>

我知道的風格標籤放置作用域，但瀏覽器的支持是沒有在附近接近實用化。

因此，我想知道是否有某種方法可以通過其他方式實現此目的，如JavaScript？

謝謝！

編輯：

我不是在尋找通過將一個類之前，像.scoped p範圍界定它。我需要它是動態的，我不能放置在所有標籤前面。

來源

2015-11-14 user3385205

你爲什麼不使用'.scoped p {color：blue;背景：綠色}'和'全球p {顏色：紅色}' – Saedawke

我解釋說我的自我很差。請參閱編輯 – user3385205

使用JS，該樣式將內聯並覆蓋CSS，以便可以工作。用jQuery實現起來很簡單：'$（'。scoped p'）。css（{...一堆屬性...}）;' – Shikkediel

如何使用CSS類？例如：

/* This only applies to p inside div with class 'global' */ 
div.global p { 
    color: red; 
} 

/* This only applies to p inside div with class 'scoped' */ 
div.scoped p{ 
    color: blue; 
    background: green; 
}

如果你想所有的p產生全球性的風格，只有作用域有獨立的風格，保留P規則，因爲它是和創建範圍的規則：

/* This rule applies to all p elements */ 
p { 
    color: red; 
} 

/* This style overrides style of p inside div with class 'scoped' */ 
div.scoped p{ 
    color: blue; 
    background: green; 
}

來源

2015-11-14 18:18:25 dotnetom

我解釋說我的自我很差。請參閱編輯。 – user3385205

@ user3385205你試圖達到的目標仍然很清楚，你是否動態加載這些'p'元素，並且希望它們有自己的風格？如果是這樣，爲什麼不在'p'元素上使用'style =「color：blue; background：green」'？ – dotnetom

不需要。我需要能夠阻止我的子元素中的全局元素的樣式。如果我的風格「.sidebar」，它應該只在該格內風格。 – user3385205

分別選擇每一個類：

.global p { 
    color: red; 
} 

.scoped p{ 
    color: blue; 
    background: green; 
}

來源

2015-11-14 18:20:26 Saedawke

我解釋我的自我很差。請參閱編輯。 – user3385205

如何將css作用於div而不在scope標籤上放置作用域？

回答

相關問題