文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用css选择iframe元素？

问如何使用css选择iframe元素？
EN

Stack Overflow用户

提问于 2013-07-03 09:14:32

回答 2查看 14K关注 0票数 2

我有几个部门如下所示

<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限制(块/无)特定页面的iframes。

例如， :

(i)。如果我在主页上，

我想显示像“小部件-0”和“小部件-2”这样的iframes，其余的iframes“小部件-1”和“小部件-3”需要禁用。

(ii)。如果我在内页，

我想显示像“小部件-1”和“小部件-3”这样的iframes，其余的iframes“小部件-0”和“小部件-2”需要禁用。

如何使用css完成此操作。有人能帮我在这个小的css调整。

段落标记的CSS选择器示例:

div#test p:first-child {text-decoration: underline;}
div#test p:last-child {color: red;}

注:

iframe标识是动态的，而不是静态的。上面的例子很简单。

css

iframe

css-selectors

回答 2

Stack Overflow用户

发布于 2013-07-03 09:21:28

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

#widget-2 { display: none }

如果希望这取决于当前所在的页面，则可能需要将类添加到指示页的body元素中。这样，就可以以所需的方式启用/禁用iframes：

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

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

票数 1

Stack Overflow用户

发布于 2013-07-03 11:39:49

首先在主页和内部添加主体类(如“主页”“内页”)

 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 }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17444077

复制

相似问题

问如何使用css选择iframe元素？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css选择iframe元素？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css选择iframe元素？
EN