Question

是否可以为文档中的div提供单独的CSS文件。此DIV不应继承页面中包含的其他CSS文件的任何属性。我将尝试通过以下几行更清楚地说明。我期待这样的事情。

<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
    <head>
        <link rel = "stylesheet" type = "text/css" href = "main_style.css" />
    </head>
    <body>
        <div class="main">
            <div rel = "stylesheet" href = "sub_style.css"> <!-- This with seperate stylesheet.-->
                <!--
                Elements here will have style only from sub_style.css and not from main_style.css
                -->
            </div>
        </div>
    </body>
</html>

编辑：如果使用DIV无法实现，我们可以使用iframe实现吗？

Answer 1

简短的回答是 NO ，如果你想阻止div从其他样式表继承样式，唯一的办法就是通过使用更具体的选择器来覆盖样式或者使用!important，我更喜欢这里的特定选择器。

例如，您可以使用样式表1中的以下代码段

div {
   color: #f00;
   font-weight: bold;
}

你在样式表2的下方

div {
   font-weight: normal;
}

在这种情况下，div的字体在被覆盖时是正常的，但颜色为#f00，为了有另一种颜色，您需要指定color你的stylesheet 2也是......

如果您希望专门定位div，我建议您使用唯一的id，然后为该特定div

例如

<div id="unique_element"></div>

div#unique_element {
   /* Define styles here, or override the previous */
}

这样，使用id您的特异性会更大程度地增加，您也可以定位特定的div

在您编辑问题时，如果您想使用iframe而不是，则可以在该文档中使用<style>块并设置div

的样式

Answer 2

您无法将CSS文件链接到div。但是通过使用id（＃）或Class（。）和适当的选择器，您可以为该div元素创建一个独立的样式。

DIV与同一文件中的单独CSS文件？

2 个答案: