我有几个像下面这样的 div，
<div id="text-2">
<div class="textwidget">
<iframe id="widget-0" src=""></iframe>
<iframe id="widget-1" src=""></iframe>
</div>
</div>
<div id="text-3">
<div class="textwidget">
<iframe id="widget-2" src=""></iframe>
<iframe id="widget-3" src=""></iframe>
</div>
</div>
在上面的 div 中，我想使用 css 限制(阻止/无)特定页面的 iframe。
例如:
(i)。如果我在主页，
我想显示“widget-0”和“widget-2”等 iframe，并且需要禁用其余 iframe“widget-1”和“widget-3”。
(ii)。如果我在内页，
我想显示“widget-1”和“widget-3”等 iframe，并且需要禁用其余 iframe“widget-0”和“widget-2”。
如何使用 css 来做到这一点。谁能帮我做这个小的 CSS 调整。
段落标签的 CSS 选择器示例:
div#test p:first-child {text-decoration: underline;}
div#test p:last-child {color: red;}
注意:
iframe id 是动态的，而不是静态的。上面是一个简单的例子。
最佳答案
您应该能够通过它们的 ID 来引用它们，例如:
#widget-2 { display: none }
如果您希望它取决于您当前所在的页面，您可能需要向指示该页面的 body 元素添加一个类。这样，您就可以按照您想要的方式启用/禁用 iframe:
<body class="home">
.home #widget-2 { display: none }
在上面的示例中，现在第二个小部件仅在主页上禁用。
关于css - 如何使用CSS选择iframe元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17444077/