css怎麼只選擇偶數行
- 青灯夜游原創
- 2021-11-10 14:05:1911160瀏覽
在css中，可以利用偽類選擇器「:nth-child()」來選擇偶數行，該選擇器能選擇表格或li等規律元素的偶數行，語法「元素:nth -child(2n){樣式}”或“元素:nth-child(even){樣式}”。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中，可以利用偽類別選擇器「:nth-child()」來選擇偶數行。 透過css3偽類選擇器 :nth-child() 可以選擇表格或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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css如何讓滑鼠懸停變色下一篇：css如何讓滑鼠懸停變色