Question

我试图理解为什么以下不起作用。据我所知，如果.modal元素是div:not(.modal) .form__group:hover { box-shadow: inset 10px 0 0 #ccc; }的子元素，它不应该给我一个方框阴影。

var x=window.open("", "myWindow");
var y="<head><title>my window</title></head><body>my window</body>";
x.document.write(y);

http://codepen.io/anon/pen/mJmddj

Answer 1

您的HTML是：

<div class="modal">
  <div class="modal__body">
    <div class="form__group">
      Hover on me for the box shadow - it shouldn't be there
    </div>
  </div>
</div>

当您删除模态div时，您会得到：

  <div class="modal__body"> <!-- fits the "div:not(.modal)" -->
    <div class="form__group">
      Hover on me for the box shadow - it shouldn't be there
    </div>
  </div>

由于.modal__body不是.modal，它是否适合您的陈述。

解决方案是将.modal__body添加到选择器：

div:not(.modal) .modal__body .form__group:hover {
    box-shadow: inset 10px 0 0 #ccc;
}

http://codepen.io/anon/pen/wadvKZ

Answer 2

您需要使用modal__body /不得像modal一样使用 Demo

HTML：

<div class="modal">  
    <div class="form__group">
      Hover on me for the box shadow - it shouldn't be there
    </div>
  </div>


  <div class="modal__body">
    <div class="form__group">
      Hover on me for the box shadow - it shouldn't be there
    </div>
  </div>

CSS：

.modal:not>.form__group:hover {
  box-shadow: inset 10px 0 0 red;
} 
.modal__body>.form__group:hover {
  box-shadow: inset 10px 0 0 #ccc;
}

Answer 3

＆＃34;从不使用选择器form__group此检查检测文件中未使用的CSS类或ID。＆＃34;

CSS not（）无法按预期工作

3 个答案: