<div.inner> 是一個在 HTML 中常用的類選擇器。它通常用于選擇某個元素的子元素，并且只選擇第一級子元素。在本文中我們將詳細討論這個選擇器，并配以幾個代碼案例來解釋說明其使用方法和效果。
，我們來看一個簡單的案例。假設我們有一個 HTML 結構如下：

<div class="container">
<div class="inner">
<p>這是內部元素的內容。</p>
</div>
</div>

在這個案例中，我們使用了一個具有 class 屬性為 "container" 的 div 元素作為外部包裹元素，并在其中嵌套了一個 class 屬性為 "inner" 的 div 元素。在內部的 div 元素中，我們又嵌套了一個 p 元素，并在其中添加了一段文本內容。
現在，如果我們想要選擇并修改這個位于 "container" 元素內部的 "inner" 元素的樣式，我們可以使用 <div.inner> 這樣的選擇器。具體代碼如下所示：

<style>
.container div.inner {
background-color: red;
color: white;
padding: 10px;
}
</style>

在這段代碼中，我們將樣式設置應用于 class 屬性同時包含 "container" 和 "inner" 的 div 元素。具體來說，我們為其設置了背景顏色為紅色、文字顏色為白色、內邊距為 10px。這樣一來，選擇器 <div.inner> 就成功將樣式應用到了位于 "container" 內部的 "inner" 元素上。
接下來，讓我們再看一個示例，更加深入地理解 <div.inner> 選擇器的使用。假設我們有如下 HTML 結構：

<div class="container">
<div class="inner">
<h1>這是內部元素的標題</h1>
<p>這是內部元素的內容。</p>
</div>
<div class="inner">
<p>這是另一個內部元素的內容。</p>
</div>
</div>

在這個例子中，我們有兩個 class 屬性為 "inner" 的 div 元素。第一個 div 元素中包含了一個 h1 標題和一個 p 元素，第二個 div 元素只包含一個 p 元素。
如果我們只想選取第一個內部元素的標題，并將其字體顏色設置為紅色，可以使用如下代碼：

<style>
.container div.inner:first-child h1 {
color: red;
}
</style>

在這段代碼中，我們使用了 :first-child 偽類來限定只選擇第一個內部元素，并為其 h1 標題設置了字體顏色為紅色。這樣一來，只有第一個內部元素的標題會應用這個樣式，第二個內部元素的標題將保持默認樣式。
以上是關于 <div.inner> 選擇器的詳細解釋和使用案例。通過使用這個選擇器，我們可以方便地選擇并修改位于某個容器元素內部的特定子元素，實現更加精細的樣式控制。希望本文對你理解和使用 <div.inner> 選擇器有所幫助！