1

我正在动态提取 HTML 内容以在我的网站页面中显示注释。问题是我正在导入的 HTML 内容在样式标签下嵌入了 CSS，因此它基本上扰乱了我的页面样式。有什么办法可以阻止传入的样式在我的页面上起作用？

例如：我有一个适用于页面 xyz.css 的 CSS 罚款，并且我正在从具有属性 ....h2{...} 的嵌入式 CSS 的服务器中动态提取 HTML 内容，因此这基本上覆盖了外部样式表。而且它会在哪里产生影响也不是很明显。

示例 HTML 内容

<style type="text/css"><!--
 /* Font Definitions */
 @font-face
    {font-family:"Cambria Math";
    panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
    {font-family:Verdana;
    panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
    {font-family:"Century Schoolbook";
    panose-1:2 4 6 4 5 5 5 2 3 4;}
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin-top:0cm;
    margin-right:0cm;
    margin-bottom:10.0pt;
    margin-left:0cm;
    line-height:115%;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";}
h1
    {mso-style-link:"Heading 1 Char";
    margin-top:30.0pt;
    margin-right:0cm;
    margin-bottom:0cm;
    margin-left:36.0pt;
    margin-bottom:.0001pt;
    text-align:justify;
    text-indent:-36.0pt;
    line-height:150%;
    font-size:16.0pt;
    font-family:"Cambria","serif";
    font-style:italic;}
h2
    {mso-style-link:"Heading 2 Char";
    margin-top:30.0pt;
    margin-right:0cm;
    margin-bottom:0cm;
    margin-left:54.0pt;
    margin-bottom:.0001pt;
    text-align:justify;
    text-indent:-54.0pt;
    line-height:150%;
    font-size:14.0pt;
    font-family:"Cambria","serif";
    font-style:italic;}
h4
    {mso-style-link:"Heading 4 Char";
    margin-top:14.0pt;
    margin-right:0cm;
    margin-bottom:0cm;
    margin-left:0cm;
    margin-bottom:.0001pt;
    line-height:150%;
    font-size:12.0pt;
    font-family:"Cambria","serif";
    font-style:italic;}
p.MsoTitle, li.MsoTitle, div.MsoTitle
    {mso-style-link:"Title Char";
    margin-top:0cm;
    margin-right:0cm;
    margin-bottom:12.0pt;
    margin-left:25.5pt;
    text-align:justify;
    text-indent:-25.5pt;
    font-size:30.0pt;
    font-family:"Cambria","serif";
    letter-spacing:.5pt;
    font-weight:bold;
    font-style:italic;}
p.MsoNoSpacing, li.MsoNoSpacing, div.MsoNoSpacing
    {margin:0cm;
    margin-bottom:.0001pt;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";}
span.Heading1Char
    {mso-style-name:"Heading 1 Char";
    mso-style-link:"Heading 1";
    font-family:"Cambria","serif";
    font-weight:bold;
    font-style:italic;}
span.Heading2Char
    {mso-style-name:"Heading 2 Char";
    mso-style-link:"Heading 2";
    font-family:"Cambria","serif";
    font-weight:bold;
    font-style:italic;}
span.Heading4Char
    {mso-style-name:"Heading 4 Char";
    mso-style-link:"Heading 4";
    font-family:"Cambria","serif";
    font-weight:bold;
    font-style:italic;}
span.TitleChar
    {mso-style-name:"Title Char";
    mso-style-link:Title;
    font-family:"Cambria","serif";
    letter-spacing:.5pt;
    font-weight:bold;
    font-style:italic;}
.MsoPapDefault
    {margin-bottom:10.0pt;
    line-height:115%;}
@page Section1
    {size:612.0pt 792.0pt;
    margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.Section1
    {page:Section1;}
 /* List Definitions */
 ol
    {margin-bottom:0cm;}
ul
    {margin-bottom:0cm;}
-->
</style>

的HTML：

</p>

<div class="Section1">
<h1 align="left" style="margin-left:0cm;text-align:left;text-indent:0cm"><b style="font-size: 13px;"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">Read the passage given below and sum up in one sentence what you think is the central idea of the passage.</span></b></h1>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">What constitutes obscenity is hazy — by religion, nation, culture or statute. Bertrand Russell goes a step further, arguing that “Obscenity is not a term capable of exact legal definition; in the practice of the Courts, it means ‘anything that shocks the magistrate.’ ” </span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">In the England in which Russell lived, magistrates showed various levels of shock. The British Parliament had passed the Obscene Publications Act in 1857 a few decades before Russell was born, to control obscene literature which was there, “for the single purpose of corrupting the morals of youth and of a nature calculated to shock the common feelings of decency in any well-regulated mind.” Such a broad generalization obviously allowed the moral police to do as they pleased, sometimes absurdly so. For instance, Annie Besant and co-author Charles Bradlaugh were once sentenced to six months in jail for publishing a pamphlet on birth control!</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;"> </span></p>

<p class="MsoNoSpacing" style="line-height:150%"><strong><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">Write out the central idea below:</span></strong></p>

<p class="MsoNoSpacing" style="line-height:150%"><b><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">Central idea:</span></b><span style="font-size:14.0pt;line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;"> ____________________________</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">_____________________________________________________________</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><b><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">How to attempt:</span></b><span style="font-size:14.0pt;line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;"> <i>Read the passage after asking yourself: what is the author saying? Approach the passage armed with a pencil. Each line should be read asking yourself whether it constitutes an idea or is it a supporting example. </i></span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">If we underline the recurring words in the passage we can easily see that it is about morality. The temptation is to think that the first line gives away the central idea, but that would ignore what is written later. </span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">Let us sum up the ideas that are contained in the passage:</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">        (<i>i</i>)    Definition of obscenity is hazy</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">        (<i>ii</i>)    Definition according to British law of 1857</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">        (<i>iii</i>)   It was used by moral police sometimes to absurd lengths</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">        (<i>iv</i>)   Example of two people being jailed for talking about birth control</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">To get to the central idea, we can knock out (ii) and (iv) from the above because these statements do not constitute the idea.</span></p>

<p class="MsoNoSpacing" style="line-height:150%"><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">In the second paragraph, we see some names and an example. We can see that (ii) is supporting (i) and (iv) is supporting (iii). So the central idea must combine statements (i) and (iii). Combining both of them, we can see that the central idea must be something like this: <i>Obscenity is a vague concept that is used by people to control ideas, sometimes to absurd lengths.</i></span></p>

<p class="MsoNoSpacing" style="line-height:150%"><b><span style="font-size:14.0pt;
line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;">What we have learnt:</span></b><span style="font-size:14.0pt;line-height:150%;font-family:&quot;Verdana&quot;,&quot;sans-serif&quot;"> <i>Spotting the central idea requires ignoring details. The central idea should encompass most of the ideas contained in the passage.</i></span></p>

<p class="MsoNormal" style="line-height:150%"> </p>

谢谢

4

3 回答 3

1

您可以像这样（来自 CSS-Tricks）使用 CSS 覆盖内联样式：

为了：

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

利用：

div[style] {
   background: yellow !important;
}

或者

只需在拉取 HTML 时删除内联 CSS 并且根本不输出它——保持 CSS 干净。

于 2013-07-29T09:35:47.273 回答
1

我正在处理完全相同的问题，我设法通过使用embed元素而不是普通的div.

唯一的复杂之处是你不能简单地设置元素innerHTML的embed，你需要设置src。这可以通过使用 blob 来实现。

这是我的原始代码：

let embedContent = "<html> ...";
let embedContainer = document.createElement("div");
embedContainer.innerHTML = embedContent;

我把它改成这样：

let embedContent = "<html> ...";
let embedBlob = new Blob([embedContent], {type: "text/html"});
let embedContainer = document.createElement("embed");
embedContainer.src = URL.createObjectURL(embedBlob);

新方法阻止任何内部样式影响外部文档。

于 2022-01-29T14:56:50.857 回答
0

您可以添加!important到外部 CSS 属性。该属性不会被任何其他属性覆盖。
例如：
height: 100px !important;

或者

您可以像这样使用“重置 CSS”

于 2013-07-29T09:39:18.100 回答