嵌套CSS规则

系统管理员 2023-02-15 12:56 2阅读 0赞

### 嵌套CSS规则 ###

*  2. 嵌套CSS规则
 *   *  2-1. 父选择器的标识符&
     *  2-2. 群组选择器的嵌套
     *  2-3. 子组合选择器和同层组合选择器： >、+和 ~
     *  2-4. 嵌套属性

# 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;
        }
    }

1.  同层相邻组合选择器+选择header元素后紧跟的p元素(p1)

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

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

1.  同层全体组合选择器~，选择所有跟在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 {
                border: {
                    style: solid;
                    width: 1px;
                    color: #f00;
                }
            }
        }
    }