Select 除单个内容外的所有内容 div

Question

我有以下 DOM 结构：

正文
- 几个元素（div 等）
- div.Popup 包括几个子节点（可能在深处）
- 几个元素（div 等）

现在我想找到一个 CSS 选择器来为除了 div.Popup 和它的子节点之外的所有内容设置 cursor: default。

有什么办法吗？

:not 选择器似乎不适用于这种情况。

例子

<div>Cursor should be 'default' here.
    <input type="text"/> 
    <a href="#">Link</a> 
    <span class="Action">Action</span>
</div>
<div class="Popup">Cursor should be unchanged here.
    <input type="text"/> 
    <a href="#">Link</a> 
    <span class="Action">Action</span>
</div>
<div>Cursor should be 'default' here.
    <input type="text"/> 
    <a href="#">Link</a> 
    <span class="Action">Action</span>
</div>

Fiddle Demo

Answer 1

试试这个：

* {
   cursor: default
}
div.Popup, div.Popup * {
   cursor: auto
}

Answer 2

好的！因此，您需要做的是将正文的光标设置为 cursor:default;，然后重新分配 cursor:pointer; 或您想要的任何指针。

body {
    cursor:default;
}

popUp:hover {
    cursor:pointer;
}

如果想让游标默认为one else where，那么代码可以简化为：

popUp:hover {cursor:pointer;}

Answer 3

对于有问题的代码（假设带有 class='Popup' 的元素是 body 的直接子元素），下面的选择器将满足要求。

body >:not(.Popup),
body >:not(.Popup) * {
    cursor: default;
    /* Insert any other required styles */
}

.Action {
  cursor: pointer;
}
body >:not(.Popup),
body >:not(.Popup) * {
  cursor: default;
  color: green; /* just for better visual depiction of selected elements */
}

<div>Cursor should be 'default' here.
  <input type="text" /> 
  <a href="#">Link</a>  
  <span class="Action">Action</span>
</div>
<div class="Popup">Cursor should be unchanged here.
  <input type="text" /> 
  <a href="#">Link</a>  
  <span class="Action">Action</span>
</div>
<div>Cursor should be 'default' here.
  <input type="text" /> 
  <a href="#">Link</a>  
  <span class="Action">Action</span>
</div>

只要带有 class='Popup' 的元素有一个定义的选择器路径，此方法就可以工作（即使带有 class='Popup' 的元素不是 body 的直接子元素） .以下是此类场景的示例片段。

.Action {
  cursor: pointer;
}
body >:not(.container),
body > .container >:not(.Popup),
body > .container >:not(.Popup) * {
  cursor: default;
  color: green;
  /* just for better visual depiction of selected elements */
}

<div class="container">
  <div>Cursor should be 'default' here.
    <input type="text" />
    <a href="#">Link</a> 
    <span class="Action">Action</span>
  </div>
  <div class="Popup">Cursor should be unchanged here.
    <input type="text" />
    <a href="#">Link</a> 
    <span class="Action">Action</span>
  </div>
  <div>Cursor should be 'default' here.
    <input type="text" />
    <a href="#">Link</a> 
    <span class="Action">Action</span>
  </div>
</div>
<div>abcd</div>

选择器的关键部分（也可能是早期尝试没有奏效的原因）是子选择器 (>) 的使用，而不是正常的后代或所有选择器 (* ).

如果选择器写成 body :not(.Popup) 或 body *:not(.Popup)，我们将选择 all 个没有 class='Popup' 的元素，因此甚至 input、a 和 span 元素也会被选中。这是因为它们也没有 class='Popup'（并且存在于 body 中）。您可以在下面的代码片段中看到所有这些文本颜色是如何变化的，以便更好地可视化。

.Action {
  cursor: pointer;
}
body :not(.Popup) {
  cursor: default;
  color: green; /* just for better visual depiction of selected elements */
}

<div>Cursor should be 'default' here.
  <input type="text" value="dummy"/> 
  <a href="#">Link</a>  
  <span class="Action">Action</span>
</div>
<div class="Popup">Cursor should be unchanged here.
  <input type="text" value="dummy"/> 
  <a href="#">Link</a>  
  <span class="Action">Action</span>
</div>
<div>Cursor should be 'default' here.
  <input type="text" value="dummy"/> 
  <a href="#">Link</a>  
  <span class="Action">Action</span>
</div>

<div>Cursor should be 'default' here. <!-- Selected -->
  <input type="text" value="dummy"/>  <!-- Selected -->
  <a href="#">Link</a>                <!-- Selected -->
  <span class="Action">Action</span>  <!-- Selected -->
</div>
<div class="Popup">Cursor should be unchanged here. <!-- Not Selected -->
  <input type="text" value="dummy"/>  <!-- Selected -->
  <a href="#">Link</a>                <!-- Selected -->
  <span class="Action">Action</span>  <!-- Selected -->
</div>
<div>Cursor should be 'default' here. <!-- Selected -->
  <input type="text" value="dummy"/>  <!-- Selected -->
  <a href="#">Link</a>                <!-- Selected -->
  <span class="Action">Action</span>  <!-- Selected -->
</div>

Note: I am not sure what is wrong with just :not(.Popup) and *:not(.Popup) but they don't seem to work at all (atleast in Chrome v24). It seems like a selector of the form element:not(x) or element :not(x) or element > :not(x) is required.

通过使用子元素选择器，我们专门只选择没有 class='Popup' 并且也是 body 标签的子元素（不是后代）的元素（及其后代）。因此，父元素不是 body 的元素不会被选中。

<div>Cursor should be 'default' here. <!-- Selected by 1st selector-->
  <input type="text" value="dummy"/>  <!-- Selected by descendant selector-->
  <a href="#">Link</a>                <!-- Selected by descendant selector-->
  <span class="Action">Action</span>  <!-- Selected by descendant selector-->
</div>
<div class="Popup">Cursor should be unchanged here. <!-- Not Selected -->
  <input type="text" value="dummy"/>  <!-- Not Selected -->
  <a href="#">Link</a>                <!-- Not Selected -->
  <span class="Action">Action</span>  <!-- Not Selected -->
</div>
<div>Cursor should be 'default' here. <!-- Selected by 1st selector -->
  <input type="text" value="dummy"/>  <!-- Selected by descendant selector-->
  <a href="#">Link</a>                <!-- Selected by descendant selector-->
  <span class="Action">Action</span>  <!-- Selected by descendant selector-->
</div>

Select 除单个内容外的所有内容 div

Select everything except the content of a single div

html

css

css-selectors