我想知道是否有解决方案来实现类似这样的效果，样式表只样式化页面的一部分。将样式表链接到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