如何在嵌套元素上应用 css答案

【问题标题】：How can I apply css on a nested element如何在嵌套元素上应用 css
【发布时间】：2017-04-03 19:53:59
【问题描述】：

我的问题标题似乎不正确，因为我找不到正确的标题。

我在我的 html 中使用了 owl 光标。见html代码

 <div role="tabpanel" class="tab-pane fade in active" id="ios">
   <ul class="screenshot-carousel">
     <li class="item"><img class="im" style="margin-left:1px;" src="images/screenshot1.jpg" alt="Image"></li>
  </ul>
</div>

当图像在中心时，活动的类被删除。所以我想做的是，当 div 的类名处于活动状态时，我想将 margin-top:-36px 应用到类名为“im”的 img 并且当没有活动类时，我想应用 margin-top 0px .

我尝试了这个 jQuery 代码来实现它，但是没有用......

<script>
     $(document).ready(function(){
         var hasClass= $("div").hasClass("active");
         if(hasClass){
           $(".im").css("margin-top","-36px");
         }
     });

</script>

【问题讨论】：

标签： jquery html css

【解决方案1】：

所以我想做的是，当 div 的类名处于活动状态时，我想将 margin-top:-36px 应用到类名为“im”的 img 并且当没有活动类时我想应用边距-top 0px。

你可以用 CSS 做到这一点：将 im 类放在 img 上，然后使用这个 CSS 来控制 margin-top：

.im {
    margin-top: 0px;
}
.active .im {
    margin-top: -36px;
}

简化示例：

document.querySelector("input[type=checkbox]").addEventListener("click", function() {
  document.querySelector(".container").classList.toggle("active", this.checked);
  var img = document.querySelector(".img");
  var style = window.getComputedStyle ? getComputedStyle(img) : img.currentStyle;
  console.log("\"Image\"'s margin-top is now: " + style.marginTop);
}, false);

.im {
    margin-top: 0px;
}
.active .im {
    margin-top: -36px;
}

.container {
  border: 1px solid #ddd;
  height: 80px;
  min-height: 80px;
}
.img {
  border: 1px solid green;
}

<div class="container">
  This is the container
  <div class="img im">
    This is the "image"
  </div>
</div>
<label>
  <input type="checkbox">
  Make the container "active"
</label>

【讨论】：

谢谢。它确实适用于 im 类，但 css 在 .active .im 中时不会改变。它给出 -36px；对于这两种情况...
@sadek：如果带有class="im" 的元素不在带有class="active" 的元素内，那么它肯定不会应用margin-top: -36px。如果您可以使用 Stack Snippet（<> 工具栏按钮）更新您的问题来展示您的问题，那么帮助您会更容易。
嗨，是的，class="im" 在一个 div 里面，哪个类是活动的。没有得到堆栈片段。我想我用过。
@sadek：对。你说你希望它是margin-top: -36px，当它在一个带有active的div中时，你不想要margin-top: 0px。这就是上面所做的。（添加了一个例子。）
@sadek: “没有得到 fet Stack Snippet。我想我用过。”“fet”不是英文单词，所以我不知道你的意思是什么。不，您没有在问题中使用 Stack Snippets。同样：<> 工具栏按钮。

【解决方案2】：

试试这个

$(document).ready(function(){
    $("div.tab-pane").each(function() {
        if($(this).hasClass("active")) { //* active pane
            $(".im").css("margin-top","0px"); //* rm margin for all images
            $(this).find(".im").css("margin-top","-36px"); // set margin for img of active pane
        }
    });
});

【讨论】：

这只会在页面就绪时运行一次，但不会在轮播移动时运行。