排除样式表

时间:2017-02-24 10:49:16

标签: html css

对于我正在开发的应用程序,我想构建生成发票的功能。此发票是可配置的,我想在我的页面中显示预览。根据我发送回C#后端的数据,我将生成一个.PDF文件,该文件可供下载。

在后端生成过程中,我将无法访问我的样式表,并且必须完全内联定义所有类。因为我希望我的预览与发票最终看起来完全匹配,所以我需要能够从预览元素中排除所有其他样式。

有办法做到这一点吗?

示例:

<link href="Content/style.css" rel="stylesheet" />
<div>
    <p>Use classes defined in style.css</p>

    <div EXCLUDE CSS OUTSIDE THIS SCOPE>
        <p>No access to style.css</p>
    </div>
</div>

我知道只需确保将预览器放在我注入CSS的范围之外就能达到预期的效果,但由于我的项目结构,这不是一个选项。

额外信息:

我正在使用我正在为此项目执行的公司购买的样式表。然而,样式表的设置非常糟糕,包括各种默认样式,如:

table {
    color: black !important;
}

我正在寻找一种方法来排除所有样式,而不必单独覆盖该样式表中的每个属性集。

4 个答案:

答案 0 :(得分:2)

all属性和initial值可将属性重置为浏览器的默认设置。因此,如果您将要从样式中“排除”的部分包装到您应用类似下面的类的标记中(即与*选择器结合使用),它应该具有您想要的效果:< / p>

.unset * {
  all: initial;
}

在HTML中:

<div>
    <p>Use classes defined in style.css</p>

    <div class="unset">
        <p>No access to style.css</p>
    </div>
</div>

但不幸的是,all尚未在IE / Edge中运行,它正在“考虑中”:http://caniuse.com/#search=all

但是,如果你的样式表没有使用太多不同的属性(如果你知道它们),你可以列出这些属性,将它们全部定义为initial并使用如上所示的选择器应用它。例如:

.unset * {
  font-size: initial;
  color: initial;
  background: initial;
  text-decoration: initial;
  margin: initial;
  padding: initial;
}

答案 1 :(得分:0)

您可以尝试使用:not()选择器并将其添加到CSS中的每个类中。这是一个简单的例子

&#13;
&#13;
model.fireTableDataChanged();
&#13;
div p:not(.secondParagraph){font-style:italic}
&#13;
&#13;
&#13;

对于你的问题,你可以这样做:

使用class&#34; myClass&#34;选择元素排除那些具有ID&#34; myID&#34;是:

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p class="secondParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

但是,IE8或更低版本不支持:not()选择器。请查看here了解相关详情。

答案 2 :(得分:0)

如果您不需要在页面中应用.css文件的样式。请添加<link rel="stylesheet" href="yourstyleXXX.css" disabled =true />属性.so它不会应用该文件中的样式。

请参阅链接stackover link以供参考。

modal.find(".save-btn").click(function () {

答案 3 :(得分:-1)

你可以像Gezzasa那样使用ID。

<div id="expluded">
    <p>Something.</p>
</div>

在css中获取新课程,如。

#expluded {

put your parameters hare.

}