1

我想知道是否有解决方案来实现这样的事情，其中​​样式表只对页面的一部分进行样式设置。

<link href="/Content/stylesheet.css" for="OnlyApplyStylesWithinHere" rel="stylesheet" type="text/css" />
<div id="OnlyApplyStylesWithinHere">
</div>

我知道我可以从样式表本身中做到这一点，但这在我的场景中是不可能的。

这种效果可以用 Javascript/Jquery 来完成吗？

4

5 回答 5

1

如果样式表没有破坏相同的来源策略，我让这个插件可以做你想做的事。

你可以像这样使用它：

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

我不确定跨浏览器的兼容性。不过你可以试试...

于 2012-08-14T11:24:00.637 回答
1

有一个 HTML5 特性，称为scoped stylesheets；它是WHATWG 草案的一部分，但不存在浏览器支持（Chrome 通过 支持它about:flags，但没有开箱即用的支持）。您可以使用此 javascript 插件使其工作。

或者，如果可以在服务器端重写样式表，您可以使用类似SASS的东西：

#my-section {
    @import "local-copy-of-the-stylesheet.scss";
}
于 2012-08-14T16:07:52.360 回答
0

检查媒体属性是否对您有帮助。media="handheld" 不会只为苹果定义 css，而是为所有小屏幕设备定义 css。

http://www.w3schools.com/tags/att_link_media.asp

于 2012-08-14T10:30:48.360 回答
0

我们可以通过 3 种方式放置样式，

1)Internal

将所有样式放在同一个html页面中，带有样式标签

2)External

通过在 html 页面的 head 部分提供样式表的参考

3)In-line

这可以使用 html 元素的样式属性来完成，即<div style="some styles"></div>

我认为以上任何人都可以解决您的疑问。

于 2012-08-14T10:31:21.760 回答
0

我不相信你所要求的是可能的。

然而，一种比较巧妙的方法是将此 HTML 标记放入一个单独的文件中，并将样式表链接在 中head，然后使用iframe.

<head>
   <link href="[main stylesheet" />
   <link href="[this page only stylesheet]" />
</head>

就像我说的那样，它很老套，但我认为这是不改变样式表的唯一方法。

于 2012-08-14T11:23:10.543 回答