CSS 覆盖内部 html 标签内的内容

发布于 2024-12-18 20:45:08 字数 554 浏览 2 评论 0原文

我目前正在为论坛（diskusjon.no）制作自定义 CSS，但我一直在努力处理页面的某些部分。 IPBoard-forum 中的编辑器是原始 html-tag 内的 html-tag，我的 CSS 通过扩展名 Stylish< /a> 无法到达页面的这一部分。

结构是这样的：

<<html> <---lots of tags--> <iframe> <html> <body contenteditable=true>

现在我的样式影响除了第二个 html 标签之后的所有内容，所以我的问题是； - 当我通过 Stylish 添加 CSS 时，是否可以到达页面的这一部分。即我无权访问任何 HTML。

这是我正在讨论的部分的 Google Inspector 的图片：

原文

I'm currently making a custom CSS for a forum (diskusjon.no), but I've been struggling with a certain part of the page. The editor in the IPBoard-forum is a html-tag inside the original html-tag, and my CSS set through the extension Stylish doesn't reach this part of the page.

The structure is something like this:

<<html> <---lots of tags--> <iframe> <html> <body contenteditable=true>

Now my style affects everything except what's after the second html-tag, so my question is; -is it possible to reach this part of the page at all when I'm adding my CSS through Stylish. i.e. I don't have access to any of the HTML.

Here's a picture of the Google Inspector for the part I'm talking about:

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

原谅我要高飞 2024-12-25 20:45:08

由于标记旨在加载外部页面，因此它将拥有自己的样式表。那么，你的风格就无法干扰它。

解决方案是在页面加载到 iframe 后使用 javascript。你可以参考这个：如何将CSS应用到iframe？问题。

回复收藏 0 原文

撧情箌佬 2024-12-25 20:45:08

无论页面是否在 iframe 中，Stylish 都会以相同的方式对待页面。因此，解决方案就是单独设置 iFramed 位的样式。

例如，假设您有页面 jsbin.com/osajuz/edit，并且它包含此 iFrame：

<iframe src="http://www.drudgereport.com/"></iframe>

然后您可以创建一个时尚样式，例如：

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://jsbin.com/osajuz") {
    body {
        background-color: pink;
    }
}

@-moz-document url("http://www.drudgereport.com/") {
    body {
        background-color: lime !important;
    }
}

效果很好。

如果您创建样式并访问 jsbin.com/osajuz，您会看到一些内容像这样：

iFrame style Preview

同样，如果框架没有 URL，它将被视为来自同一域的页面，并且URL 作为包含页面。时尚规则仍然适用。

例如，如果您创建此时尚样式：

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jsbin.com") {
    body {
        color: orange;
    }
}

@-moz-document url-prefix("http://jsbin.com/abazay/3/edit") {
    body {
        background: lime;
    }
}

然后访问 jsbin.com/abazay/3/edit #preview，您将看到两种样式都应用于两个“内部”iFrame。

但请注意，如果您不小心，无论 JS 操作 iFrame 都可以覆盖 CSS 样式。因此，请自由使用 !important 标志来解决这个问题。

Stylish treats a page the same whether it's in an iframe or not. So, the solution is just to style the iFramed bit separately.

For example, suppose you had the page jsbin.com/osajuz/edit, and it contained this iFrame:

<iframe src="http://www.drudgereport.com/"></iframe>

Then you could create a Stylish style like:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://jsbin.com/osajuz") {
    body {
        background-color: pink;
    }
}

@-moz-document url("http://www.drudgereport.com/") {
    body {
        background-color: lime !important;
    }
}

which works.

If you create the style and visit jsbin.com/osajuz, you will see something like this:

iFrame style preview

Likewise, if the frame has no URL, it is treated as a page from the same domain and URL as the containing page. Stylish rules will still apply.

For example, if you create this Stylish style:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jsbin.com") {
    body {
        color: orange;
    }
}

@-moz-document url-prefix("http://jsbin.com/abazay/3/edit") {
    body {
        background: lime;
    }
}

and then visit jsbin.com/abazay/3/edit#preview, you will see both styles applied to both "internal" iFrames.

But note that whatever JS is operating an iFrame can override CSS styles if you are not careful. Therefore make liberal use of the !important flag to combat this problem.

回复收藏 0 原文

~没有更多了~