セレクターを使用してCSSの要素を除外する方法

CSS はフロントエンド開発における重要なスキルの 1 つであり、基本的な要素の選択やスタイルの変更に加えて、選択と除外も CSS における非常に重要な知識ポイントです。この記事では、CSS における選択の除外について説明し、参考となる実践例を示します。

セレクターの概要

選択と除外の方法を学ぶ前に、まず CSS セレクターの基本を理解しましょう。

CSS セレクターは、HTML 要素を選択するために使用されます。 CSS には、基本セレクター、階層セレクター、擬似クラス セレクターなど、さまざまな種類のセレクターがあります。これらのセレクターには、さまざまな用途と構文があります。

基本的なセレクターのいくつかのタイプを次に示します:

• タグ セレクター: HTML 要素のタグ名によって選択します。例: p{color:red}
• クラス セレクター: HTML 要素のクラス属性を通じて選択します。例: .myclass{color:blue}
• ID セレクター: クラスを通じて選択します。選択する HTML 要素の ID 属性。例: #myid{color:green}
• ワイルドカード セレクター: すべての HTML 要素を選択します。例: *{color:ピンク}
• 属性セレクター: HTML 要素の属性値によって選択します。例: [href="http://www.example.com"]{color:purple}

上記の基本的なセレクターを組み合わせることで、HTML 要素を正確に選択し、CSS を通じてそのスタイルを変更できます。

除外対象の選択

要素を選択するだけでなく、一部の要素を除外する必要がある場合もありますが、このとき除外対象の選択は非常に便利です。

CSS で選択を除外するには、いくつかの方法があります:

• :not pseudo-class
• :first-child pseudo-class
• : last -child pseudo-class
• :only-child pseudo-class

では、一つずつ紹介していきます。

:not pseudo-class

:not pseudo-class は、特定の要素を除外するために使用されます。簡単な構文を使用して、セレクター内の指定された要素を除外できます。

たとえば、すべての p 要素を選択しますが、p 要素内の class="no" を持つ要素を除外したいとします。次の構文を使用できます。

p:not(.no){color:blue}

この方法では、すべての p 要素を正確に選択できますが、class="no" を持つ要素を除外し、それらを置き換えます。 テキスト フォント色が青に変わります。

:first-child pseudo-class

:first-child pseudo-class は、最初の子要素の選択を示し、特定の要素を除外するために使用することもできます。

たとえば、すべての li 要素の最初の子要素 ​​a を選択しますが、class="no" 要素を持つ要素は除外します。

li > a:first-child:not(.no){color:blue}

これにより、すべての li 要素の最初の子要素 ​​a を正確に選択できますが、 の要素は除外されます。 class="no" 要素のテキストのフォントの色を青に変更します。

:last-child pseudo-class

:last-child pseudo-class は、最後の子要素の選択を示し、特定の要素を除外するために使用することもできます。

たとえば、すべての ul 要素の最後の子要素 ​​li を選択したいとしますが、class="no" を持つ要素は除外します。要素を指定するには、次の構文を使用できます。

ul > li:last-child:not(.no){color:blue}

これにより、すべての ul 要素の最後の子要素 ​​li を正確に選択できますが、## を持つ要素は除外されます。 # class="no" を持つ要素のテキストのフォントの色を青に変更します。

:only-child pseudo-class

:only-child pseudo-class は、唯一の子要素を選択することを示し、特定の要素を除外するために使用することもできます。

たとえば、すべての

div 要素を選択しますが、一意の子要素 ​​p のみを選択し、class="no" # の要素を除外します。 ## 要素の場合は、次の構文を使用できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">div &gt; p:only-child:not(.no){color:blue}</pre><div class="contentsignin">ログイン後にコピー</div></div> これにより、すべての

div

要素のうち唯一の子要素 ​​p を正確に選択できますが、For 要素は除外されます。 class="no" では、テキストのフォントの色を青に変更します。 実際のケース

次に、選択除外の使用方法を示す実際のケースを示します。

ケースの説明: 動的に生成されたナビゲーション バー メニューがあり、その一部にはドロップダウン メニューがあります。ここで、すべてのメニューのフォントの色を赤に変更する必要がありますが、ドロップダウン メニューのあるメニューは除外します。およびそのドロップダウン メニュー、フォントの色。

HTML コード:

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品中心</a>
    <ul class="submenu">
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
      <li><a href="#">产品3</a></li>
    </ul>
  </li>
  <li><a href="#">解决方案</a></li>
  <li><a href="#">关于我们</a>
    <ul class="submenu">
      <li><a href="#">公司简介</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </li>
</ul>

CSS コード:

.menu li > a:not(.submenu > li > a){
  color: red;
}

説明:

:not()

疑似クラスを通じて、 を使用できます。 submenu の li 要素とその子要素 ​​submenu > li は除外され、すべての li 要素と子要素 a## のみが除外されます。 # が選択され、文字色が赤色に変更されます。 以上が選択除外の基礎知識と実践です。実際の開発では、選択の除外は、HTML 要素を選択し、そのスタイルをより効率的に変更するのに役立つ非常に実用的なテクニックです。

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