<h1>div CSS高級</h1>

在CSS中，div是一個非常重要的元素，它被廣泛用于網頁布局和樣式控制。本文將詳細介紹一些div的高級用法。

1. 直接選擇器

<div>

<div class="container">
<p>Hello World</p>
</div> 
<br>
    .container {
background-color: #f5f5f5;
}

</div>

上面的代碼演示了如何使用div的class選擇器來給特定的div添加樣式。在這個例子中，我們給class為“container”的div設置了一個背景顏色。

2. 選擇嵌套元素

<div>

<div id="parent">
<div class="child">
<p>This is a child element</p>
</div>
</div>
<br>
    #parent .child {
color: blue;
}

</div>

在這個例子中，我們使用了父子選擇器來選擇<div>元素的子元素。

3. 偽類選擇器

<div>

<style>
<div>:hover {
background-color: yellow;
}
</style>

</div>

上面的代碼片段展示了如何使用偽類選擇器來給鼠標懸停在<div>元素上時添加樣式。當鼠標懸停在<div>元素上時，背景顏色將變為黃色。

4. CSS3過渡效果

<div>

<style>
<div> {
transition: background-color 0.5s ease;
}
<br>
    <div>:hover {
background-color: yellow;
}
</style>

</div>

上述代碼片段展示了如何使用過渡效果在鼠標懸停時平滑地改變<div>元素的背景顏色。在懸停期間，背景顏色會逐漸變成黃色。

5. Sass和Less

<div>

<style lang="scss">
$primary-color: blue;
<br>
    .container {
background-color: $primary-color;
}
</style>

</div>

在這個例子中，我們使用了Sass語法來給<div class="container">元素設置了一個變量，并將變量用作背景顏色的值。

這篇文章介紹了一些常用的<div> CSS高級用法。我們講解了如何使用class選擇器、選擇嵌套元素、偽類選擇器、過渡效果以及使用Sass和Less等輔助工具。這些技巧能夠幫助開發者更好地控制和美化網頁布局。