gpt4 book ai didi

javascript - 限制来自外部样式表的 CSS 不应用于 div 内的小部件

转载 作者:可可西里 更新时间:2023-11-01 13:23:07 25 4
gpt4 key购买 nike

我有一个 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>

两个样式文件里面的样式是,

样式1.css

.theme-css input[type="text"] {
color: red;
}

样式2.css

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

style1 和 style2 都将样式应用于输入文本框,但在不同的 css 属性上。因此,当我加载页面时,我的小部件中的输入文本框从 style1.css 中的 theme-css 样式获取红色,并且从 style2.css 中的 mywidget 样式获取 100% 宽度。

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

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

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

上述覆盖可能无济于事,因为小部件可以加载到不同的网站。不同的网站有不同的主题和不同的风格。因此,一个站点的覆盖 css 可能不适用于另一个站点。这无助于 CSS 缩放和为具有不同主题的多个网站维护单个 css 文件。

这可以用任何其他方式完成吗,这样我就不需要覆盖每个元素的 css,它在父 css 中有样式?

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

我找到了 cleanslate.css,它被提到可以解决 js 小部件的 css 问题。但问题是我需要添加!对我所有的风格都很重要。这是正确的方法吗?有什么建议吗??

最佳答案

您无法停止 CSS 继承,但如果您真的需要这样做,可以尝试使用 iframe,因为它是独立的。我相信这也是其他社交媒体巨头在其网站上使用的内容。

关于javascript - 限制来自外部样式表的 CSS 不应用于 div 内的小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43456427/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com