Question

我想知道是否有一个解决方案来实现这样的东西，其中样式表只对页面的一部分进行样式化。

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

我知道我可以在样式表本身内执行此操作，但在我的方案中这是不可能的。

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

Answer 1

如果样式表没有打破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);

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

Answer 2

这个名为scoped stylesheets的HTML5功能;它是WHATWG草案的part，但浏览器支持不存在（Chrome通过about:flags支持它，但没有开箱即用的支持）。您可以使用this javascript plugin使其正常工作。

或者，如果可以对服务器端进行服务器端重写，则可以使用类似SASS的内容：

#my-section {
    @import "local-copy-of-the-stylesheet.scss";
}

Answer 3

检查媒体属性是否对您有所帮助。媒体=＆＃34;手持＆＃34;不会为苹果而是为所有小屏幕设备定义css。

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

Answer 4

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

1)Internal

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

2)External

通过在html页面

中为head section的样式表提供参考

3)In-line

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

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

Answer 5

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

然而，一个 hacky 方法是将此HTML标记放入单独的文件中，样式表链接在head中，然后使用{{1}将其包含在原始文件中}}

iframe

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

将样式表链接到ID

5 个答案: