我需要在嵌套的 div 中进行样式更改。下面的代码:
<div id="video_id" class="videoLayout">
<div style="width:695px;height:391px;"></div>
</div>
我想将嵌套 div 中的样式更改为width:600px;height:340px;
设备 ipad 和方向横向时的样式。(媒体查询/jquery 任何解决方案都可以)
任何人都有任何建议。谢谢
我需要在嵌套的 div 中进行样式更改。下面的代码:
<div id="video_id" class="videoLayout">
<div style="width:695px;height:391px;"></div>
</div>
我想将嵌套 div 中的样式更改为width:600px;height:340px;
设备 ipad 和方向横向时的样式。(媒体查询/jquery 任何解决方案都可以)
任何人都有任何建议。谢谢
iPad横向方向
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#video_id > div { width:600px;height:400px;}
}
有几种方法可以访问嵌套的<div>
. 最简单的方法是为其分配一个类/ID,然后直接定位它!如果这不是一个选项,CSS 中有一些方法可以定位嵌套元素。
选择器 1:
#container #nested-div{
}
标识符之间的空格(在本例中为 2 个 ID)意味着 CSS 将首先找到具有第一个 ID 的元素,然后进入内部并查看它的所有嵌套(子)元素及其具有第二个 ID 的子元素等。
选择器 2:
#container > div{
}
这做同样的事情,但由于>
它们之间的关系,CSS只查看直接子项,它不会再往下走。
检查此 jQuery 解决方案是否有效:
$('div#video_id').find('div:first').attr('style', 'width:600px; height:340px;');