CSS 里面的包屑 在很多網站中，常常會看到一個名為“面包屑”的導航工具。它通常位于網頁的頂部或頁面標題下方，用于指示當前頁面在整個網站中所處的位置。面包屑的經典形式就是面包屑的導航欄。那么，在 CSS 中如何實現面包屑呢？ 在 CSS 中，實現面包屑的方法也很簡單。我們可以使用偽元素和 CSS 屬性來實現一個非常簡單的面包屑導航欄。 例如，一個簡單的面包屑導航欄可以這樣實現：

ul.breadcrumb li+li:before {
content: ">";
}

這段 CSS 代碼會自動給兩個 li 元素之間添加一個 ">" 符號來表示當前頁面所處位置。其中的 ul.breadcrumb 表示一個包含了 class 為“breadcrumb”的 ul 元素的樣式規則，而 li+li:before 則表示相鄰 li 元素之間的偽元素。 如果你想要添加更多的樣式屬性來美化你的面包屑導航欄，那么你還可以使用熟悉的 CSS 屬性來實現。 例如，你可以給導航欄添加一個背景顏色和文字顏色，如下所示：

ul.breadcrumb {
background-color: #f2f2f2;
padding: 10px;
list-style: none;
margin: 0;
display: inline-block;
}
ul.breadcrumb li {
display: inline;
font-size: 14px;
margin-right: 10px;
}
ul.breadcrumb li+li:before {
content: ">";
margin-right: 10px;
}
ul.breadcrumb li:last-child {
color: #777;
}

這段 CSS 代碼將為面包屑導航欄添加了一些樣式屬性，如包括背景顏色、內邊距、列表樣式、外邊距和布局屬性。此外，你還可以使用偽類選擇器 last-child 來更改最后一個 li 元素的文字顏色，以突出顯示當前頁面的位置。 總之，在 CSS 中實現一個具有美觀設計和實用功能的面包屑導航欄并不難，只需要掌握一些基本的 CSS 技巧即可。