将样式表链接到 ID

Link stylesheet to ID

本文关键字：ID 链接 样式      更新时间：2023-09-26

我想知道是否有解决方案可以实现这样的事情，其中样式表仅设置页面的一部分样式。

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

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

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

如果样式表不违反同源策略，我让这个插件女巫做你想做的事。

你可以像这样使用它： 

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

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

有一个HTML5功能，称为作用域样式表;它是WHATWG草案的一部分，但浏览器支持不存在（Chrome通过about:flags支持它，但没有开箱即用的支持）。您可以使用此JavaScript插件来使其工作。

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

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

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

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

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

1)Internal

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

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>

就像我说的，它很笨拙，但我认为这是不更改样式表的唯一方法。

相关文章：