使用しようとしています：カスタムカーソルのためのnot（）が動作していません

Question

私のページの本文には、ユーザがそれ以上アクティブでない場合、左から来るスライドトレイのナビがありますdivカスタムクローズカーソルのみを表示するように、私はそれを動作させるのに苦労しています。

.display-cs :not(#cs-index) { 
    cursor: pointer; 
    //url('../img/icons/close-cross.png'), default; 
} 

https://jsfiddle.net/38gdp4pb/1/

私はちょうどカーソルに戻す試みた：無駄にポインタ、私が間違ってやっている任意のアイデアを？

---

更新

私の体は、クラス.display-csを持っており、#cs-indexは、ページ上のメニューです。私は、カスタムカーソルがページに表示されますが、したくない#cs-index

Answer 1

EDITED ANSWER OPのコメントの後内：

あなたは単に別々のルールでそれを上書きする可能性が

：

.display-cs { 
    cursor: pointer; 
    //url('../img/icons/close-cross.png'), default; 
} 

#cs-index { 
    padding: 10rem; 
    background: red; 
    color: #fff; 
    cursor: default; 
} 

https://jsfiddle.net/dgroucag/

Answer 2

:not()を使用して、特定の子ではなく親を選択することはできません。代わりに、子要素のデフォルトポインタを取得するための特定のルールを定義する必要があります。

.display-cs { 
 
    cursor: pointer; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 
#cs-index { 
 
    cursor: initial; 
 
} 
 
#cs-index { 
 
    padding: 5px; 
 
    background: red; 
 
    color: #fff; 
 
}

<div class="display-cs"> 
 
    <div class="nav" id="cs-index">This is my nav</div> 
 
    asdasd 
 
</div>

Answer 3

あなたnotに必要はありません、この1つだけを試してみてください#cs-index{cursor:auto;}

.display-cs { 
 
    padding: 20px; 
 
    cursor: pointer; 
 
    background-color: blue; 
 
    color: #FFF; 
 
} 
 

 
#cs-index { 
 
    background-color: red; 
 
    cursor: auto; 
 
    padding: 40px; 
 
}

<div class="display-cs"> 
 
    <div class="nav" id="cs-index">cs-index</div> 
 
    display-cs 
 
</div>

Answer 4

とそれをオーバーラップ：

.display-cs { 
 
    cursor: pointer; 
 
} 
 

 
#cs-index { 
 
padding:10rem; 
 
background:red; 
 
color:#fff; 
 
cursor:initial; 
 
}

<div class="display-cs"> 
 

 
<div class="nav" id="cs-index">This is my nav</div> 
 
asdasd 
 
</div>

Answer 5

CSS：

.display-cs *:not(#cs-index) { 
    cursor: pointer; 
} 
#cs-index { 
    padding:10rem; 
    background:red; 
    color:#fff; 
    cursor: default; 
} 

HTML：

<div class="display-cs"> 
    <div class="nav" id="cs-index">This is my nav</div> 
    <div> 
     asd1 
    </div> 
    <div> 
     asd2 
    </div> 
</div> 

これは、ID #cs-index

を持っていない任意の要素ブロックの上にポインタカーソルを置きます