我想知道是否有解決方案來實現類似這樣的效果，樣式表只樣式化頁面的一部分。將樣式錶鏈接到ID
<link href="/Content/stylesheet.css" for="OnlyApplyStylesWithinHere" rel="stylesheet" type="text/css" />
<div id="OnlyApplyStylesWithinHere">
</div>
我知道我可以在樣式表本身內做到這一點，但這在我的場景中是不可能的。
這個效果可以用Javascript/jquery完成嗎？
如果樣式表沒有打破same origin policy，我做了這個插件女巫做你想做的。初始化後
<link rel="stylesheet" href="..." data-wrapper="#mySelector" />
<style data-wrapper="#mySelector">
.ninja {
visibility: hidden;
}
</style>
又說：
您可以使用它像這樣
$("link[rel='stylesheet']").addWrapperToStyle("#mySelector");
$("style").addWrapperToStyle("#mySelector");
(function($) {
var $styleSheet = $("<style type='text/css'/>").appendTo("head");
function getStyle($element, callback) {
callback($element.text());
}
function getLink($element, callback) {
$.get($element.attr("href"), function(style) {
callback(style);
});
}
function appendStyle(style) {
$styleSheet.text(function(i, text) {
return text + "\n" + style;
});
}
function wrapStyle(element, selector) {
var $element = $(element);
if ($element.is("style")) {
getStyle($element, callback);
} else {
getLink($element, callback);
}
function callback(style) {
if (style) {
style = ("" + style).replace(/([^}]+){/g, function(match) {
var matches = match.split(","),
i = 0,
len = matches.length;
for (; i < len; i++) {
matches[i] = selector + " " + $.trim(matches[i])
}
match = matches.join(",");
return match;
});
appendStyle(style);
$element.remove();
}
}
}
$(function() {
$("link[rel='stylesheet'][data-wrapper], style[data-wrapper]").each(function() {
wrapStyle(this, this.getAttribute("data-wrapper"));
});
});
$.fn.addWrapperToStyle = function(wrapper) {
return this.each(function() {
wrapStyle(this, wrapper);
});
}
})(jQuery);
林不知道關於跨瀏覽器兼容。但你可以嘗試...
檢查媒體屬性是否對您有幫助。 media =「handheld」不會定義只適用於蘋果的css，而適用於所有小屏幕設備。
，我們可以通過樣式表使參考把樣式有3種方式，
1)Internal
把所有的款式相同的HTML頁面中，withing風格標籤
2)External
在頁頭部分，在html頁面
3)In-line
這可以通過使用HTML元素的樣式屬性 來完成，例如， <div style="some styles"></div>
我認爲上述任何人都可以解決您的疑問。
我不相信你的要求是可能的。
但是一個哈克方法是把這個HTML標記成一個單獨的文件，以在head鏈接的樣式表，然後使用iframe包括這在你的原始文件。
<head>
<link href="[main stylesheet" />
<link href="[this page only stylesheet]" />
</head>
就像我說的，它的hacky，但我認爲它是唯一的方法而不改變樣式表。
有一個叫做scoped stylesheets的HTML5功能;它是WHATWG草案的part，但瀏覽器支持不存在（Chrome支持通過about:flags支持，但沒有現成的支持）。您可以使用this javascript plugin使其工作。
或者，如果樣式表的服務器端的重寫是可能的，你可以使用類似SASS：使不同SYLE表應用到頁面的不同區域]的
#my-section {
@import "local-copy-of-the-stylesheet.scss";
}
可能重複（HTTP：/ /stackoverflow.com/questions/6441999/making-different-syle-sheets-apply-to-different-areas-of-the-page） – Quentin 2012-08-14 10:32:59
我建議你聲明css來指定**只有孩子＃OnlyApplyStylesWithinHere * *僅適用於它的孩子，就像'#ApplyStyle .child'一樣只能在** ApplyStyle的ID中使用**孩子的班級標記** ** – whytobe 2012-08-14 10:48:04