嵌套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;
            }
        }
    }
}