接下來我們介紹CSS階層選擇器，與之前的屬性的優先權高低有所不同。
我們直接上範例，在我的body之中我們先上code:

        <h3>我是一個title33333333333333</h3>
        <h4>我是一個title4444444444444444444443</h3>
        <div class="container">
            <p>我是.container裡第一層的p</p>
            <p>我是.container裡第一層的p 我是另外一個段落</p>
            <article>
                <p>我是.container第二層的p我是第二層的p</p>
                <p>我是.container第二層的p我是第二層的p</p>
            </article>
            <p>我是.container裡第一層的p 我還是一個段落</p>
            <p>我是.container裡第一層的p </p>
        </div>
        <p>我是container外面的p</p>
        <p>我是container外面的p</p>

接著再CSS中上這些code:

.container>p {
    background: tomato;
    color: black;
    padding: 5px 15px;
    border-radius: 6px;
}

上述這一行，會出現變化的是class container裡的【第一層】p標籤

.container {
    font-size: 50px;
}

這一行會出現變化的是class container

.container+p {
    color: red;
}

這一行會出現變化的是 class container 後面的第一個p標籤

h3,h4 {
    color: aquamarine;
    font-size: 50px
}

這一行選擇的是h3及h4標籤的文字

因此各種階層都有所不同，選擇的時候大家要小心選用。

今天的教學素材 可以至我的GitHub 上下載我的第一個網站-4