嵌套CSS規則

2. 嵌套CSS規則

2-1. 父選擇器的標識符&

僞元素 : hover

   <article>
        Lorem ipsum dolor sit amet 
        <a href="https://www.sass.hk/guide">瞭解：父選擇器的標識符&</a> 
        consectetur adipisicing elit. Tempore dolores exercitationem, 
        at optio tempora quo rerum in aliquam odio inventore doloribus 
        quidem eveniet iure earum quam obcaecati omnis laborum quaerat.
    </article>

article {
    font-size: 20px;
    a {
        color: #00f;
        &:hover {
            color: #f00;
        }
    }
}

2-2. 羣組選擇器的嵌套

    <main class="container">
        <h1>羣組選擇器的嵌套1</h1>
        <h2>羣組選擇器的嵌套2</h2>
        <h3>羣組選擇器的嵌套3</h3>
    </main>

.container {
   h1, h2, h3{
       color: #f00;
   }
}

注意：羣組選擇器sass樣式表看上去很小，但是實際上生成的css卻可能非常大，這會減低網站的速度。

2-3. 子組合選擇器和同層組合選擇器： >、+和 ~

1. 選擇article元素下的所有section子元素

    <article>
        <section>Lorem, ipsum.</section>
        <section>Lorem.</section>
        <div>div1</div>
        <section>Lorem, ipsum dolor.</section>
    </article>

article {
    > section {
        color: #f00;
    }
}

2. 同層相鄰組合選擇器+選擇header元素後緊跟的p元素(p1)

    <header>header</header>
    <p>p1</p>
    <p>p2</p>

header {
    + p {
        color: #f00;
    }
}

3. 同層全體組合選擇器~，選擇所有跟在header後的同層p元素(p1,p2,p3)

    <header>header</header>
    <p>p1</p>
    <p>p2</p>
    <div>div1</div>
    <p>p3</p>

header {
    ~ p {
        color: #f00;
    }
}

2-4. 嵌套屬性

    <nav>
        <ol>
            <li>百度</li>
            <li>谷歌</li>
        </ol>
    </nav>

nav {
    ol {
        li {
            border: {
                style: solid;
                width: 1px;
                color: #f00;
            }
        }
    }
}