<div>是HTML中最常用的元素之一，用于創建塊級元素。在編寫HTML和CSS代碼時，我們經常需要指定元素的樣式、布局和顯示。但是，當多個CSS規則應用于同一個元素時，就會發生沖突。為了解決這個問題，CSS引入了權重的概念，用于指定哪個規則應該具有更高的優先級。
<div>元素的權重可以通過不同的選擇器來設置。選擇器是一種指定要應用樣式的HTML元素的方式。根據選擇器的類型和數量，CSS給它們賦予了不同的權重。其中，ID選擇器的權重最高，類選擇器和屬性選擇器的權重次之，標簽選擇器的權重最低。同時，內聯樣式具有最高的優先級，因為它直接寫在HTML標簽內。
下面我們將通過幾個代碼案例來詳細說明<div>設置權重的方法。
案例1：使用ID選擇器設置權重 假設我們有一個<div>元素，希望將其背景顏色設置為紅色，字體顏色設置為白色。我們可以通過設置ID選擇器的方式來實現：

<p>HTML代碼：</p>
<div id="my-div">這是一個示例<div>
<br>
<p>CSS代碼：</p>
<pre>
#my-div {
background-color: red;
color: white;
}

在上面的代碼中，我們給<div>添加了一個id屬性，并將其值設置為"my-div"。接著，我們使用CSS選擇器#my-div來指定要應用的樣式。這里，我們將背景顏色設置為紅色，字體顏色設置為白色。由于ID選擇器的權重最高，這些樣式將被優先應用。
案例2：使用類選擇器設置權重 假設我們有多個<div>元素，并希望將其中的一部分設置為綠色背景色和黑色字體。我們可以使用類選擇器的方式來實現：

HTML代碼：

<div class="custom-div">這是一個示例<div>
<div>這是另一個示例<div>

CSS代碼：

.custom-div {
background-color: green;
color: black;
}

在上面的代碼中，我們給其中一個<div>元素添加了class屬性，并將其值設置為"custom-div"。接著，我們使用CSS選擇器.custom-div來指定要應用的樣式。這樣，只有具有相同class的<div>元素才會應用這個樣式。由于類選擇器的權重較高，這些樣式將被其他樣式覆蓋。
案例3：使用嵌套選擇器設置權重 有時候，我們需要對<div>元素進行更精確的選擇，以便將樣式應用到特定的子元素。在這種情況下，我們可以使用嵌套選擇器來設置權重。

HTML代碼：

<div id="parent">
<div>這是父級<div>
<div>這是子級<div>
</div>

CSS代碼：

#parent div {
background-color: yellow;
color: blue;
}

在上面的代碼中，我們選擇id為"parent"的<div>元素，然后選擇其中的所有<div>元素。這樣，只有位于父級<div>內部的子級<div>才會應用這個樣式。嵌套選擇器的權重較高，這些樣式將優先應用于子級元素。
綜上所述，通過設置不同的選擇器，我們可以為<div>元素設置不同的樣式，并控制樣式的權重。了解和正確使用CSS選擇器和權重，將有助于我們更好地控制和管理HTML頁面的布局和顯示。