詳解descendent

一、什麼是descendent

在HTML和CSS中，descendent（後代）指的是一個元素是另一個元素的子元素或者孫子元素。

例如，HTML中的<ul>元素下有多個<li>子元素，則<li>元素就是<ul>的後代元素。

二、descendent的用法

descendent是CSS選擇器中最常用的選擇器，其用法如下：

    
        // 選取ul元素下的所有li子元素
        ul li {
            ...
        }

        // 選取ul元素下的所有直接li子元素
        ul > li {
            ...
        }

        // 選取id為main下的所有後代元素
        #main * {
            ...
        }

        // 選取class為box下的所有直接子元素中的p元素
        .box > p {
            ...
        }
    

三、descendent與性能的關係

CSS選擇器的性能是前端開發中需要關注的一點，因為不合理的選擇器會導致頁面性能下降。

descendent選擇器是需要遍歷整個DOM樹的，因此它的性能相對較差。我們可以通過減少descendent選擇器的使用來提高頁面性能。

以下是一些提高頁面性能的技巧：

1. 避免使用通配符選擇器（*）。
2. 盡量少用descendent選擇器。
3. 避免使用同層兄弟選擇器（~）和相鄰兄弟選擇器（+）。
4. 避免使用CSS表達式和!important規則。

四、實例演示

下面是一個實例演示，展示如何使用descendent選擇器進行網頁布局：

    
        <div class="container">
            <header class="header">
                <h1>Logo</h1>
                <nav class="nav">
                    <ul>
                        <li>Home</li>
                        <li>About</li>
                        <li>Contact</li>
                    </ul>
                </nav>
            </header>
            <div class="main">
                <div class="sidebar">
                    <h2>Sidebar</h2>
                    <ul>
                        <li>Item 1</li>
                        <li>Item 2</li>
                        <li>Item 3</li>
                    </ul>
                </div>
                <div class="content">
                    <h2>Content</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia semper convallis. Suspendisse semper, nunc in lacinia vulputate, elit quam aliquam leo, et dictum sapien metus ut felis.</p>
                </div>
            </div>
            <footer class="footer">
                <p>Copyright © 2021</p>
            </footer>
        </div>

        /* 使用descendent選擇器進行布局 */
        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
        }

        .nav {
            display: flex;
            justify-content: space-between;
        }

        .main {
            display: flex;
            flex: 1;
        }

        .sidebar {
            width: 250px;
            background-color: #CCC;
        }

        .content {
            flex: 1;
            padding: 20px;
        }

        .footer {
            padding: 20px;
            text-align: center;
        }
    

五、總結

descendent是CSS選擇器中常用的一個選擇器，使用它可以方便地選取HTML文檔中的特定元素。但是，我們需要注意避免descendent選擇器的濫用，以提高頁面性能。