在div中更改div的样式。内部div具有内联css，没有任何id和类

Question

我需要在嵌套div中进行样式更改。代码如下：

<div id="video_id" class="videoLayout">
    <div style="width:695px;height:391px;"></div>
</div>

我希望在设备ipad和方向横向时将嵌套div中的样式更改为width:600px;height:340px;。 （媒体查询/ jquery任何解决方案都可以）

任何人都有任何建议。 感谢

Answer 1

iPad横向定位

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  #video_id > div { width:600px;height:400px;}
}

Answer 2

有几种方法可以访问嵌套的<div>。最简单的方法是为它分配一个类/ id并直接定位它！如果这不是一个选项，那么CSS中有一些方法可以定位嵌套元素。

DEMO

选择器1：

#container #nested-div{
}

标识符之间的空格（在这种情况下为2个ID）意味着CSS将首先找到具有该第一个ID的元素，然后进入并查看所有嵌套（子）元素及其子元素等，并使用第二个ID。 / p>

选择器2：

#container > div{
}

这也是做同样的事情，但由于它们之间的>，CSS 仅查看直接子项，它不会再进一步​​下降。

Answer 3

检查此jQuery解决方案是否有效：

$('div#video_id').find('div:first').attr('style', 'width:600px; height:340px;');