Html 编辑 iframe 中元素的 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36512542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
edit css of elements within iframe
提问by J.Pyz
I am using some free instagram feed iframe code on my site and want to edit the size of the pictures on mobile...curently on desktop the feed is 2 rows of 5 pictures. on mobile I want to increase the size of the pictures to 50% width that way its 5 rows of 2 pictures. I opend up the console and it looks like its li.in-tile that needs a width:50%; however when you look at the css of that element it is .lightwidget.in-grid.in-grid-5 li with a width of 20% but i need it to be 50%.
我在我的网站上使用了一些免费的 instagram 提要 iframe 代码，并想在移动设备上编辑图片的大小……目前在桌面上，提要是 2 行 5 张图片。在移动设备上，我想将图片的大小增加到 50% 的宽度，这样它的 5 行 2 张图片。我打开控制台，看起来它的 li.in-tile 需要宽度：50%；但是，当您查看该元素的 css 时，它是 .lightwidget.in-grid.in-grid-5 li，宽度为 20%，但我需要它为 50%。
I am using weebly to build the site if that helps and yes I am inserting
如果有帮助，我正在使用weebly来构建网站，是的，我正在插入
.lightwidget.in-grid.in-grid-5 li{
width:50% !important;
}
onto the media query for mobile "max width 480px".
移动“最大宽度 480 像素”的媒体查询。
this is the embed code I am using to call the feed.
这是我用来调用提要的嵌入代码。
<!-- 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>
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 时，它正在调用托管在某处的 html 文档……我需要知道是否有办法更改该 css。
hopefully i explained that well.
希望我解释得很好。
Thanks.
谢谢。
采纳答案by Lux Logica
[...] 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 时，它正在调用托管在某处的 html 文档。我需要知道是否有办法改变那个 css。
The question of how to style an element inside an iFrame has come up on StackOverflow many times before - try having a look here:
关于如何在 iFrame 中设置元素样式的问题之前已经多次出现在 StackOverflow 上 - 试试看这里：
Another post that addresses it can be seen here:
另一个解决它的帖子可以在这里看到：
Using CSS to affect div style inside iframe
And one with a rather short explanation here:
还有一个在这里有一个相当简短的解释：
