CSSで最初のliをスタイル解除する方法-フロントエンドQ&A-php.cn

CSSで最初のliをスタイル解除する方法

青灯夜游

リリース： 2022-09-02 19:02:53

オリジナル

2158 人が閲覧しました

CSS では、最初の li をスタイルなしのままにすることは、最初の li を除外し、他の li 要素にスタイルを追加することを意味します。 3 つの方法: 1. ":not()" と ":first-child" を使用します。構文は "element:not(:first-child){style}" です。 2. ":nth-of-type" を使用します。構文 "Element:nth-of-type(n 2){style}"; 3. ":nth-child" を使用し、構文は "Element:nth-child(n 2){style}" です。

CSSで最初のliをスタイル解除する方法

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

最初の li にはスタイルを設定しないようにします。つまり、最初の li 以外の他の li にスタイルを追加します。

#3 つの実装方法

方法 1: セレクターを使用します: not() および: first-child

:not()
を使用して最初以外の要素と一致させます子要素のその他の要素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			li{
				float: left;
				height: 50px;
				line-height: 50px;
				width: 50px;
				margin: 20px;
				background: #ccc;
				text-align: center;
				color: #fff;
			}
			li:not(:first-child){
			
			    background:red;
			
			}
		</style>
	</head>

	<body>
		<ul class="dom">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>

</html>

ログイン後にコピー

CSSで最初のliをスタイル解除する方法説明:

:not(selector)
セレクターは、指定された要素/セレクターではないすべての要素と一致します。
:first-child
セレクター指定されたセレクターは、親要素に属する最初の子要素を選択するために使用されます。

方法 2:

:nth-of-type()

:nth-of- を使用するtype(n)

セレクターは、親要素の特定の型の N 番目の子要素であるすべての要素と一致します。n は 0 から始まり、

n 2

は当然のことながら Start です2番目の要素で。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">li:nth-of-type(n+2){ background:pink; }</pre><div class="contentsignin">ログイン後にコピー</div></div>

CSSで最初のliをスタイル解除する方法同様に、奇数の要素を選択する場合、

は 2n 1

であり、偶数の要素を選択する場合は、次のようにする必要があります。 2n 2;プロジェクトの状況に応じて特定の状況を使用できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">li:nth-of-type(2n+1){ background:pink; } li:nth-of-type(2n+2){ background:green; }</pre><div class="contentsignin">ログイン後にコピー</div></div>

CSSで最初のliをスタイル解除する方法

方法 3:

:nth-child():nth-child(n ) セレクターは、要素の型に関係なく、その親要素に属する N 番目の子要素と一致します。

メソッド 3 およびメソッド 2 タイプの場合は、

()

の値を「n 2」に設定するだけです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">li:nth-child(n+2){ background:green; }</pre><div class="contentsignin">ログイン後にコピー</div></div>

CSSで最初のliをスタイル解除する方法同様に、奇数番号の要素を選択する場合は

2n 1

となり、偶数番号の要素を選択する場合は、 2n 2;プロジェクトの状況に応じて特定の状況を使用できます。

li:nth-child(2n+1){
	background:green;
}
li:nth-child(2n+2){
	background:pink;
}

ログイン後にコピー

（学習ビデオ共有:

Web フロントエンドの入門 ）
以上がCSSで最初のliをスタイル解除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。