Question

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

两个样式文件中的样式是

style1.css

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

style2.css

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

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

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

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

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

由于可以在不同的网站中加载窗口小部件，因此上述覆盖可能没有帮助。不同的网站有不同的主题和不同的风格。因此，被覆盖的一个站点的CSS可能不适合另一个站点。这对于缩放和维护具有不同主题的多个网站的单个css文件没有帮助。

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

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

我找到了cleanslate.css，其中提到的将解决js小部件的css问题。但问题是我需要添加！对我所有的风格都很重要。这是正确的方法吗？有什么建议??

Answer 1

你无法阻止CSS继承，但如果你真的需要这样做，可以试试iframe，因为它是自包含的。我相信这是其他社交媒体巨头在他们的网站上使用的。

Answer 2

无法排除样式表影响某些元素。如果要为其设置默认样式，可以为窗口小部件添加更多特定样式。

#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
}

将应用覆盖颜色。

Answer 3

有了这个：

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

您无法覆盖该文件，但您可以覆盖其他所有规则。

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

干杯！

Answer 4

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

＆＃13;

#mywidget.one input[type="text"]  {
    width : 100%;
    color: red
}

#mywidget.two  input[type="text"] {
    width : 100%;
    color: blue
}

＆＃13;

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

＆＃13;

Answer 5

如果您可以修改CSS和HTML，则可以在应用color: red样式之前检查2个类来使其工作。

为了说明，请查看以下代码段：

＆＃13;

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

＆＃13;

<div class="theme-css">
  <div class="mywidget">
    <label>Textbox</label>
    <input type="text" value="name" />
  </div>
  <div class="mywidget">
    <label>Textbox</label>
    <input type="text" value="address" class="red" />
  </div>
</div>

＆＃13;

附加说明：

.some-class .red - 此选择器表示将样式应用于具有类red的元素，该类是具有类some-class的元素的子元素。

.some-class.red - （注意缺少空格）此选择器意味着将样式应用于同时具有some-class和red类的元素。

从外部样式表限制CSS不要申请div中的小部件

5 个答案: