CSSで要素を除外する方法

Web デザインのプロセスでは、さまざまな効果を実現するために CSS スタイルを使用する必要がよくあります。ただし、場合によっては、要素を除外する、つまり要素に対して CSS スタイルの操作を実行しないことが必要な場合があります。この記事では、CSS で要素を除外するいくつかの方法を紹介します。

1. :not セレクターを使用する
:not セレクターは、括弧内の要素を除くすべての要素を選択できます。構文は次のとおりです。

:not(选择器) {
  /* CSS 样式 */
}

たとえば、すべての div 要素を選択するが、div# 内のクラス exclude を持つ要素を除外する場合は、 ## elements 要素の場合、次のように記述できます:

div:not(.exclude) {
  /* CSS 样式 */
}

2. 使用: nth-of-type() セレクター

:nth-of-type() セレクターは同じ要素を選択できます。 type 要素を入力し、そのうちの 1 つを除外する場合の構文は次のとおりです。

选择器:nth-of-type(n) /* 选中某个类型的元素的第 n 个 */
选择器:nth-of-type(-n) /* 选中除了靠后的 n 个之外的所有元素 */
选择器:nth-of-type(n - m) /* 选中第 n 到第 m 个 */

たとえば、すべての

div 要素を選択し、2 番目の div 要素を除外する場合

div:nth-of-type(n + 1):not(:nth-of-type(2)) {
  /* CSS 样式 */
}

3. クラス名を使用して要素を除外する

HTML で、要素に一意のクラス名を追加し、CSS スタイルを通じてこのクラス名以外の他の要素を選択します。 。この方法はより一般的に使用され、複数のクラス名を追加して選択できます。

4. 擬似クラス セレクターを使用する

CSS の擬似クラス セレクターは、選択した要素に特別な属性を追加できるセレクターです。このうち、
:not()は、特定の要素を除外できる擬似クラスセレクターです。

たとえば、親要素の下で 2 番目のフォントの色が赤であるすべての子要素を選択するが、クラス

exclude を持つ要素は含めない場合は、次のように記述できます。 ##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">div:nth-child(n) &gt; :nth-child(2):not(.exclude) {   color: red; }</pre><div class="contentsignin">ログイン後にコピー</div></div> 要するに、上記の 4 つの方法は、CSS スタイルの要素を除外するときに使用できます。各方法の具体的なシナリオは異なる場合がありますが、それらはすべて、Web デザインに役立つより実用的なソリューションです。 CSS スタイルをより柔軟に。

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