資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何設定奇數和偶數列表項的樣式？
列表是專案的集合，被認為是表示資訊的一種最佳方式之一。HTML 中的列表元素有助於我們構建頁面上的內容。無論是用於導航還是顯示一般內容，它都是最常用的元素之一。HTML 允許我們以三種方式表示列表：有序列表、無序列表和描述列表。
無序列表：這種型別的列表用於表示 HTML 專案，這些專案沒有任何特定順序。使用 <ul> 標籤定義無序列表。
有序列表：它用於表示按特定順序排序的 HTML 列表項。使用 <ol> 標籤定義有序列表。
描述列表：它允許我們建立帶有列表中每個專案描述的列表。列表項使用 <dt> 標籤指定，<dd> 標籤用於新增列表項的描述。它們都包含在 <dl> 標籤中。
示例
讓我們看一個使用 CSS 屬性設定樣式的簡單列表示例。
<!DOCTYPE html>
<html>
<head>
<title>List Styling in CSS</title>
<style>
li{
background-color:wheat;
width:225px;
color:sienna;
font-weight:bold;
}
</style>
</head>
<body>
<p>Famous International Travel Destinations</p>
<ol>
<li>Maldives</li>
<li>Bali</li>
<li>Singapore</li>
<li>Dubai</li>
<li>Thailand</li>
</ol>
</body>
</html>
預設情況下，樣式屬性應用於整個列表。如果我們需要分別設定奇數和偶數列表項的樣式，則必須使用 CSS 中的偽類。
使用 :nth-child 偽類
CSS 偽類是新增到選擇器中的關鍵字，用於指定所選元素的特殊狀態。它以冒號 (:) 開頭，以偽類名稱結尾。
偽類 :nth-child() 根據元素在其同級元素組中的索引或位置選擇並向其新增樣式。可以使用數字、關鍵字或公式來指定 :nth-child()。
使用奇數關鍵字值
影響具有奇數數值位置的元素（例如 1、3、5、7 等）。以下是語法：
li:nth-child( odd ) {
// Set of CSS properties
}
使用偶數關鍵字值
影響具有偶數數值位置的元素（例如 2、4、6、8 等）。以下是語法：
li:nth-child( even ) {
// Set of CSS properties
}
示例
此示例的目的是演示如何使用帶有 even 關鍵字的 :nth-child 偽類設定偶數列表元素的樣式。
<!DOCTYPE html>
<html>
<head>
<title>How to Style Even and Odd List Items</title>
<style>
li{
width:300px;
padding:5px;
}
li:nth-child(even) {
background-color:mistyrose;
color:sienna;
font-weight:bold;
font-size:18px;
}
p{
color:sienna;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<p>Steps to make Tea</p>
<ol>
<li>Heat water in a vessel.</li>
<li>Add tea leaves, ginger, cardamom and some tea masala.</li>
<li>Let it simmer for a while until the flavours get infused properly.</li>
<li>Now, add milk and sugar as required.</li>
<li>Bring it to a boil.</li>
<li>Strain and serve.</li>
</ol>
</body>
</html>
示例
在此示例中，我們將使用帶有 odd 關鍵字的 :nth-child 偽類設定奇數列表項的樣式。
<!DOCTYPE html>
<html>
<head>
<title>How to Style Even and Odd List Items</title>
<style>
li{
width:300px;
padding:5px;
}
li:nth-child(odd) {
background-color:mintcream;
color:mediumturquoise;
font-weight:550;
font-size:20px;
border:1px solid teal;
}
p{
color:teal;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<p>Steps to make Tea</p>
<ol>
<li>Heat water in a vessel.</li>
<li>Add tea leaves, ginger, cardamom and some tea masala.</li>
<li>Let it simmer for a while until the flavours get infused properly.</li>
<li>Now, add milk and sugar as required.</li>
<li>Bring it to a boil.</li>
<li>Strain and serve.</li>
</ol>
</body>
</html>
示例
最後一個示例顯示瞭如何使用帶有 odd 和 even 關鍵字值的 :nth-child 偽類分別設定奇數和偶數列表項的樣式。
<!DOCTYPE html>
<html>
<head>
<title>How to Style Even and Odd List Items</title>
<style>
li{
width:320px;
padding:5px;
}
li:nth-child(even) {
background-color:mistyrose;
color:sienna;
font-weight:bold;
font-size:18px;
}
li:nth-child(odd) {
background-color:mintcream;
color:mediumturquoise;
font-weight:550;
font-size:20px;
}
p{
color:darkslategray;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<p>Steps to make Tea</p>
<ol>
<li>Heat water in a vessel.</li>
<li>Add tea leaves, ginger, cardamom and some tea masala.</li>
<li>Let it simmer for a while until the flavours get infused properly.</li>
<li>Now, add milk and sugar as required.</li>
<li>Bring it to a boil.</li>
<li>Strain and serve.</li>
</ol>
</body>
</html>
更新於： 2023年9月12日
366 次瀏覽
廣告