Question

<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
 <div id="disp"> 
   <div>
      hi how are u
   </div>
   <div style="position:absolute;left:50px;top:100px;">
      hello
   </div>
 </div>
 <script type="text/javascript">
  $(function(){
    $("#disp").css({"background-color":"#00ff00"});
  });
  </script>
</body>
</html>

如果你运行这个代码它将打印两个div一个是“你好，你好”和“你好”这里一个div有一个绿色一个是白色我已经改变了颜色属性与父div。我的问题是为什么下一个div没有得到绿色我知道问题是绝对的位置我如何处理这种情况

Answer 1

只需继承父级的 background-color 属性：

<div style="position:absolute;left:50px;top:100px; background-color: inherit">

Answer 2

在这里，你可以试试这个

$('#disp > div').eq(1).css('background-color', 'red');

希望这会有所帮助..

Answer 3

您可以使用nth-child css选择器（即在#disp容器中选择第二个子div）：

$("#disp div:nth-child(2)").css({"background-color":"#00ff00"});

然后，您可以根据需要修改css样式。

Answer 4

我没有尝试，但我想知道下面的内容会起作用：

$("#disp div).filter(function() {
    return $(this).css("position") == "absolute";
}).css({"background-color":"#00ff00"});

Answer 5

你应该写css而不是jquery

   #disp > div {
     background:#00ff00;
   }

使用父div id更改绝对div中的css

5 个答案: