CSSで偶数行のみを選択する方法-CSSチュートリアル-php.cn

CSSで偶数行のみを選択する方法

青灯夜游

リリース： 2021-11-11 16:13:10

オリジナル

11158 人が閲覧しました

CSS では、疑似クラスセレクター ":nth-child()" を使用して偶数行を選択できます。このセレクターは、tables や li などの通常の要素の偶数行を選択できます。構文「Element:nth」-child(2n){style}」または「element:nth-child(even){style}」。

CSSで偶数行のみを選択する方法

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

CSS では、疑似クラスセレクター「:nth-child()」を使用して偶数行を選択できます。 css3 疑似クラスセレクター :nth-child() を使用すると、tables や li などの通常の要素の行も選択できます。

:nth-child(n) セレクターは、親要素内の n 番目の子要素と一致します。要素の型には制限はありません。 n には、数値、キーワード、または数式を指定できます。

n がキーワード「even」または数式「2n」の場合、偶数行を選択できます。

偶数行を選択するための構文:

元素:nth-child(2n){样式}

元素:nth-child(even){样式}

ログイン後にコピー

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			p:nth-child(2n)
			{
				background:#ff0000;
			}
			li:nth-child(even){
				background: #AFEEEE;
			}
			
		</style>
	</head>
	<body>
		<div>
			<p>这是第一个段落。</p>
			<p>这是第二个段落。</p>
			<p>这是第三个段落。</p>
			<p>这是第四个段落。</p>
		</div>
		<ul>
			<li>第一项</li>
			<li>第二项</li>
			<li>第三项</li>
			<li>第四项</li>
		</ul>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSで偶数行のみを選択する方法