编辑 iframe 中元素的 css

Question

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

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

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

关于移动设备“最大宽度 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

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

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

How to apply CSS to iframe?

可以在这里看到另一个解决它的帖子：

Using CSS to affect div style inside iframe

这里有一个相当简短的解释：

CSS override body style for content in iframe?