Question

我有以下DOM结构：

体
- 几个元素（div等）
- div.Popup包括几个子节点（可能是内心深处）
- 几个元素（div等）

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

有没有办法做到这一点？

: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

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

只要具有class='Popup'的元素具有单个定义的选择器路径，此方法就可以工作（即使body的元素不是class='Popup'的直接子元素）。以下是针对此类情况的示例代码段。

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

选择器的关键部分（可能是早期尝试没有奏效的原因）是使用子选择器（>）而不是普通的后代或所有选择器（*）。

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

＆＃13;

body

＆＃13;

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

＆＃13;

<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.  <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>和:not(.Popup)有什么问题，但它们似乎根本不起作用（至少在Chrome v24中）。似乎需要*:not(.Popup)或element:not(x)或element :not(x)形式的选择器。

通过使用子选择器，我们只专门选择不具有element > :not(x)的元素（及其后代），也是class='Popup'标记的子元素（不是后代）。因此，未选择父项不是body的元素。

body

Answer 3

确定！所以你需要做的是将光标设置为正文的cursor:default;，然后重新分配cursor:pointer;或你想要的任何指针。

body {
    cursor:default;
}

popUp:hover {
    cursor:pointer;
}

如果您希望光标是其他位置的默认光标，则可以将代码简化为：

popUp:hover {cursor:pointer;}

选择除单个div的内容之外的所有内容

3 个答案: