css :not() セレクターの使用方法

CSS では、not セレクターは、指定されていない要素/セレクターの各要素と一致するために使用され、構文形式は「:not(selector)」です。 not セレクターは、指定されていない各要素のスタイルを設定できます。たとえば、「:not(p){background:red;」は、p 要素ではない各要素の背景色を設定します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

:not() セレクターは、いくつかの特別な関数を表示するために使用されます。私が使用するものの例を示します。上にマウスを置くと、これらのラベルは 2 番目のラベルと同じように色が変わります。

最初のものをクリックして「資産セクター」というラベルを付け、その上にマウスを置くと、この特殊効果は必要ありません。

この変更を実装するにはどうすればよいですか?

これは非常に簡単で、この問題は &:not() セレクターを使用することで簡単に解決できます。

W3CSchool の定義:

: not(selector) セレクターは、指定されていない要素/セレクターの各要素と一致します。

上記の効果を達成するために私がどのような操作を行っているかをご覧ください。

元のコード:

.pr-pos-box_tab {
  display: inline-block;
  margin-right: 5px;
  padding: 10px 12px 8px;
  color: @pr-dark-grey-2;
  font-size: 13px;
  font-weight: bold;
  background-color: @pr-middle-grey;  
  cursor: pointer;
  &:last-child{
    margin-right: 0;
  }
  &:hover{
    background-color: @pr-light-grey-7;
  }
}

変更されたコード:

.pr-pos-box_tab {
  display: inline-block;
  margin-right: 5px;
  padding: 10px 12px 8px;
  color: @pr-dark-grey-2;
  font-size: 13px;
  font-weight: bold;
  background-color: @pr-middle-grey;  
  cursor: pointer;
  &:last-child{
    margin-right: 0;
  }
}
 
 
.pr-pos-box_tab:not(.pr-pos-box_tab--selected) {
  &:hover{
    background-color: @pr-light-grey-7;
  }
}

違いがわかりますか?

はい~ホバーが pr-pos-box_tab--selected タグに影響しないように not(.pr-pos-box_tab--selected) を使用しました

変更後の効果写真:

(学習ビデオ共有:

css ビデオ チュートリアル

)

以上がcss :not() セレクターの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。