编辑 iframe 中的 css 个元素

Question

我在我的网站上使用一些免费的 instagram feed iframe 代码，想在移动设备上编辑图片的大小...目前在桌面上，feed 是 2 行，每行 5 张图片。在移动设备上，我想将图片的大小增加到 50% 宽度，这样它的 5 行 2 张图片。我打开控制台，它的 li.in-tile 看起来需要 width:50%；但是，当您查看该元素的 css 时，它是 .lightwidget.in-grid.in-grid-5 li，宽度为 20%，但我需要它为 50%。

如果有帮助，我正在使用 weebly 来构建网站，是的，我正在插入

.lightwidget.in-grid.in-grid-5 li{
width:50% !important;
}

移动媒体查询"max width 480px"。

这是我用来调用提要的嵌入代码。

<!-- LightWidget WIDGET --><script src="//lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/3c1052429c9753bfa460e4a0636864a3.html" id="lightwidget_3c1052429c" name="lightwidget_3c1052429c"  scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>

显然，当网页呈现 iframe 时，它正在调用托管在某处的 html 文档...我需要知道是否有办法改变 css。

希望我解释得很好。

谢谢。

Answer 1

[...] Obviously when the webpage renders that iframe it is calling an html doc hosted somewhere. I need to know if there is a way to alter that css.

如何在 iFrame 中设置元素样式的问题以前在 Whosebug 上出现过很多次 - 试试看这里：

How to apply CSS to iframe?

另一个 post 可以在这里看到解决它的问题：

Using CSS to affect div style inside iframe

这里的解释相当简短：

CSS override body style for content in iframe?

编辑 iframe 中的 css 个元素

edit css of elements within iframe

html

css

iframe

weebly