Javascript 限制外部样式表中的CSS不应用于div内部的小部件_Javascript_Jquery_Html_Css

Javascript 限制外部样式表中的CSS不应用于div内部的小部件

javascript jquery html css

Javascript 限制外部样式表中的CSS不应用于div内部的小部件,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个html文件，其中加载了两个css文件，如下所示 <html> <head> <link rel="stylesheet" type="text/css" href="style1.css"> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body class="theme-css"> <div id="mywidget"

我有一个html文件，其中加载了两个css文件，如下所示

<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body class="theme-css">

<div id="mywidget">
<label>Textbox</label>  
<input type="text" value="name" />
</div>

</body>
</html>

#mywidget input[type="text"] {
    color: initial;
    width : 100%;
}

样式2.css

#mywidget input[type="text"] {
    width : 100%;
}

style1和style2都将样式应用于输入文本框，但应用于不同的css属性。因此，当我加载页面时，我的小部件中的输入文本框从style1.css中的主题css样式获得红色，从style2.css中的mywidget样式获得100%的宽度

我的要求是，我们可以将mywidget div中应用的样式限制为仅来自一个css文件的样式。（即）从上面的示例中，我不希望从style1.css应用文本框上的红色，我只希望从style2.css应用100%的宽度。样式是否可以限制在一个div中，仅从特定的样式表加载

我知道这可以通过覆盖style2.css中输入类型文本框的颜色属性来实现，如下所示：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body class="theme-css">

<div id="mywidget">
<label>Textbox</label>  
<input type="text" value="name" />
</div>

</body>
</html>

#mywidget input[type="text"] {
    color: initial;
    width : 100%;
}

上面的覆盖可能没有帮助，因为小部件可以加载到不同的网站。不同的网站有不同的主题和不同的风格。因此，一个站点被覆盖的css可能对另一个站点不起作用。这无助于CSS扩展和维护具有不同主题的多个网站的单个CSS文件

这是否可以通过其他方式实现，这样我就不需要覆盖每个元素的css，因为每个元素都有父css中的样式

我们采用JavaScript小部件的方法来避免使用iframe

我找到了cleanslate.css，上面提到它将解决js小部件的css问题。但问题是我需要补充！对我所有的风格都很重要。这是正确的方法吗。任何建议？？？

不可能排除样式表影响某些元素。如果您想为小部件设置默认样式，您可以为它添加更多特定的样式

#mywidget > input[type="text"] {
    width: 100%;
    color: desired_default_color
}

然后，如果小部件的用户不喜欢默认颜色，他们可以通过在级联中添加较低的样式来覆盖默认颜色。例如：

#mywidget > input[type="text"] {
    width: 100%;
    color: desired_default_color
}

#mywidget > input[type="text"] {
    color: override_color
}

将应用覆盖颜色。

使用此选项：

   #mywidget input[type="text"] {
        color: initial !important;
        width : 100% !important;
    }

您不能覆盖该文件，但可以覆盖其他所有规则

*重要的不是css中的最佳实践，而是我能想到的最佳解决方案

干杯

你不能这样做，不能在不同的页面部分使用不同的样式表，我不明白你为什么需要这样做。使用类别：

#mywidget.one输入[type=“text”]{
宽度：100%；
颜色：红色
}
#mywidget.two输入[type=“text”]{
宽度：100%；
颜色：蓝色
}


文本框
文本框

您无法停止CSS继承，但如果确实需要这样做，可以尝试使用

iframe

，因为它是自包含的。我相信这就是其他社交媒体巨头在其网站上使用的方式。

如果你可以修改你的CSS和HTML，你可以通过在应用

颜色：红色

样式之前检查两个类来实现

要进行说明，请检查以下代码段：

。主题css输入[type=“text”]。红色{
颜色：红色；
}
.mywidget输入[type=“text”]{
宽度：100%；
}


文本框
文本框

您没有访问主样式表的权限吗？如果您没有，您计划如何在多个站点上保持这种行为？您的HTML和CSS是否仍然可以修改？@Waxi No我没有访问主样式表的权限。维护多个站点的行为是我认为的主要问题

！重要信息

应该只用于调试，而不是用于生产代码。我同意，但另一种解决方案将涉及JS。我更愿意添加一些重要的内容，而不是在doc加载后编写脚本来更改样式。我们希望避免使用iframe。所以，我一直在寻找在小部件中包含css的选项。我应该在问题本身中提到这一点