Question

我在页面上有一个组件可以通过拖放方式移动。我想要做的是在拖动项目时将正文标记设置为user-select:none。

像这样（隐喻为<选择器是伪装的）：

 body < .sortable-item.is-dragging {
      user-select: none;
 }

Answer 1

目前CSS3不支持此父相对选择器。在实现CSS4之前，您必须等待CSS4：CSS4 :has() pseudo-class draft

或者，如果您正在寻找jQuery解决方案，则可以使用:has()选择器。

＆＃13;

$('.container:has(.sortable)').css('user-select', 'none');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div class="sortable">
      Not selectable
    </div>
  </div>
  <div class="container">
    <div class="not-sortable">
      Selectable text
    </div>
  </div>
</body>

＆＃13;

当包含元素存在时选择HTML正文

1 个答案: