Question

我有几个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是动态的，而不是静态的。以上是一个简单的例子。

Answer 1

您应该可以通过他们的ID来引用它们，例如：

#widget-2 { display: none }

如果您希望将此项添加到您当前所在的页面中，则可能需要将一个类添加到指示该页面的body元素中。有了它，您可以按照自己的方式启用/禁用iframe：

<body class="home">
.home #widget-2 { display: none }

在上面的示例中，现在仅在主页上禁用第二个小部件。

Answer 2

首先在家庭和内部添加身体类（如“主页”“内页”）

 iframe { display: none }

 .home-page iframe#widget-0, .home iframe#widget-0 { display:block }

 .inner-page iframe#widget-1, .home iframe#widget-3 { display:block }

如何使用css选择iframe元素？

2 个答案: