logo标签列表

带有外部样式表的Div？

csshtmlstylesinnerhtml
12

我得到了一个外部样式表(.css文件)，不能以任何方式进行更改。然而，我需要将这个样式表应用于单个div，因此是我已经存在网页中的div内容。我目前将样式表的内容作为文本读入到空的style标签(使用.innerHTML)中，但是这仍然会影响整个网页，而不仅仅是单个div。请问有人可以帮忙解决吗？

CSS影响整个页面。我所知道的唯一隔离它只影响页面特定部分的方法是使用IFRAME。 - Gareth Cornish
那么在我的 div 中放置一个 IFRAME？我可以做到，但是如何仅影响 IFRAME 呢？ - LethalPapercut
8个回答
12

在您的主 HTML 文件中，您将拥有您的 DIV：

<div id="myspecialdiv">
    <iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>

按照您需要的样式进行设置。 divcontent.html文件应该是一个完整的HTML文件，包括DIV标签的内容和使用外部样式表的LINK：

<html>
    <head>
        <link rel="stylesheet" href="path/to/external/stylesheet.css" />
    </head>
    <body>
        <!-- The contents of your DIV -->
    </body>
</html>
1
假设我有多个外部样式表，那么如何在运行时将它们全部链接到divcontent.html？我正在开发一个Web应用程序，该应用程序不断获取新的.css文件。 - LethalPapercut
1
这取决于您的运行时环境、用于开发Web应用程序的语言、它所基于的框架以及您的应用程序架构。但是，并没有要求 divcontent.html 文件实际上必须是HTML - 它可以是任何构造HTML的文件（例如：PHP，aspx等）。答案给出了概念 - 您需要根据自己的具体需求进行适应。 - Gareth Cornish
6

如果你能够使用HTML5，你可以尝试使用scoped styles。你可以将CSS包含在div中，只影响其父元素：

<div>
    <style scoped>
        // Styles here
    </style>
</div>
看起来是一个很棒的解决方案，但由于作用域属性在任何主流浏览器中都不受支持，所以它并不符合我的需求。 - LethalPapercut
我想要链接到外部CSS文件，但似乎不能在<style scoped>标签内完成，类似@import "external.css";不知道为什么不起作用！ - QMaster
1
似乎不再支持 <style scoped>。请参见以下链接：https://dev59.com/N14b5IYBdhLWcg3w1UvL#45692033 - amartin
3
1
似乎不再支持<style scoped>。请参见以下链接：https://dev59.com/N14b5IYBdhLWcg3w1UvL#45692033 - amartin
2
如果您可以访问服务器端脚本（例如：PHP），您可以创建一个脚本来加载外部样式表，并在每个条目前面添加一个类名。然后将此类应用于您的DIV标记。因此，如果CSS包括：
p { font-size: 12px; }

你需要修改它为：

你需要将其修改为：

.mydiv p { font-size: 12px; }

并将您的DIV格式化为
<div class="mydiv">...</div>

您需要将脚本作为样式表加载，而不是直接加载外部样式表。
<link rel="stylesheet" href="path/to/internal/script.php" />
这似乎是一个非常可行的解决方案。我对PHP不是很了解，那么如何在每个条目前面添加类名呢？ - LethalPapercut
你是用基本的HTML和JavaScript编写你的Web应用程序，还是使用其他系统？ - Gareth Cornish
基本的HTML和JavaScript是肯定的。 - LethalPapercut
你如何修改CSS文件，取决于CSS文件的格式以及该格式的可靠性。你可以尝试使用正则表达式，或者需要构建一个CSS解析器，或者介于两者之间。 - Gareth Cornish
我按照你之前建议的方法，使用了IFRAME解决了我的问题。我在Web开发方面还非常新手，这个应用程序是我第一次尝试，所以非常感谢你的帮助。 - LethalPapercut
1
我建议您可以将外部样式表保持不变，创建一个内部样式表，并在其中使用外部样式表中所需的类来影响您的单个div，只需将其重命名并将这些重命名的类应用于该div。重新命名是因为这些类的属性可能会影响来自外部样式表的页面上已存在的元素。
<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>

希望这有所帮助。
0

我假设外部文件中的样式规范不包含类或ID，而是对像<p>这样的标签进行全局调整（因此无法包含在页面头部）。将您的div放入<style scoped>标签中，并在那里导入.css文件。请参见：http://css-tricks.com/saving-the-day-with-scoped-css/

0
你可以为你想要样式化的文档部分指定一个CSS前缀。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接