ホームページ > ウェブフロントエンド > CSSチュートリアル > css :not() セレクターの使用方法

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

青灯夜游
リリース: 2021-04-30 12:04:08
オリジナル
7927 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート