ホームページ > 記事 > ウェブフロントエンド > CSSで偶数行のみを選択する方法
CSSで偶数行のみを選択する方法
- 青灯夜游オリジナル
- 2021-11-10 14:05:1911160ブラウズ
CSS では、疑似クラス セレクター ":nth-child()" を使用して偶数行を選択できます。このセレクターは、tables や li などの通常の要素の偶数行を選択できます。構文「Element:nth」-child(2n){style}」または「element:nth-child(even){style}」。
このチュートリアルの動作環境: 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 ビデオ チュートリアル)
以上がCSSで偶数行のみを選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS マウスオーバーで色を変える方法次の記事：CSS マウスオーバーで色を変える方法