【问题标题】:Change style of div inside a div. The inside div has inline css without any id and class更改 div 内的 div 样式。内部 div 具有内联 css,没有任何 id 和 class
【发布时间】:2013-11-27 05:48:48
【问题描述】:

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

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

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

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

【问题讨论】:

  • ...
  • 我不确定如何深入到第二个 div 并更改嵌套 div 的 css / 样式。 2nd div 中也有很多代码......但这并不重要,因为我想保持原样......只需更改内联的嵌套 div 的样式。
  • this is how to target ipad only 并定位你想要的 div 你可以使用#video_id &gt; div

标签: javascript jquery css media-queries


【解决方案1】:

检查这个 jQuery 解决方案是否有效:

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

【讨论】:

    【解决方案2】:

    有几种方法可以访问嵌套的&lt;div&gt;。最简单的方法是为其分配一个类/ID,然后直接定位它!如果这不是一个选项,CSS 中有一些方法可以定位嵌套元素。

    DEMO

    选择器 1:

    #container #nested-div{
    }
    

    标识符之间的空格(在本例中为 2 个 ID)意味着 CSS 将首先找到具有第一个 ID 的元素,然后进入内部并查看它的所有嵌套(子)元素及其具有第二个 ID 的子元素等。

    选择器 2:

    #container > div{
    }
    

    这做同样的事情,但是由于它们之间的&gt;,CSS只查看直接子代,它不会再往下走。

    【讨论】:

      【解决方案3】:

      iPad 横向方向

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

      【讨论】:

        猜你喜欢
        相关资源
        最近更新 更多
        热门标签