2

我有几个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。

例如 ：

（一世）。如果我在首页，

我想显示像“widget-0”和“widget-2”这样的iframe，其余的iframe“widget-1”和“widget-3”需要被禁用。

(二)。如果我在内页，

我想显示像“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 是动态的，而不是静态的。以上是一个简单的例子。

4

2 回答 2

1

您应该能够通过他们的 id 来引用它们，例如：

#widget-2 { display: none }

如果您希望它依赖于您当前所在的页面，您可能需要向 body 元素添加一个类来指示该页面。有了它，您可以按照您想要的方式启用/禁用 iframe：

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

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

于 2013-07-03T09:21:28.413 回答
1

首先在 home 和 inner 中添加 body 类（如 "home-page" "inner-page" ）

 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 }
于 2013-07-03T11:39:49.080 回答