選擇器之間使用大於符號

選擇父元素的子元素,不包括子元素的子元素

css選擇器使用大於符號可以選擇不含元素內的其他相同子元素,這個語法簡單的使用符號大於[ > ]在選擇器之間。

以下範例可以看出在CSS語法.div1 > p字體顏色為紅色 ,.div1裡面的子元素<p>div1-P2</p>,因為外面父元素為<span>.div1 > p使用[ > ]符號,所以受引響的只有.div1下一層級的<p><p>div1-P2</p>一樣是呈現原來的黑色文字。若沒有使用[>]符號則連同子元素內的,所有<p>都會受樣式影響呈現紅色文字。

<style type="text/css">
    .div1 > p {
        color: red;
    }

    .div2 p {
        color: red;
    }
</style> 

<div class="div1">
    <p>div1-P1</p>
    <span><p>div1-P2</p></span>
</div>

<div class="div2">
    <p>div2-P1</p>
    <span><p>div2-P2</p></span>
</div>

HTML 標籤中的屬性進行選擇

css選擇器也可使用p[title]這樣的語法,選擇元素HTML標籤屬性。

<style type="text/css">
    p[title] {
        color: red;
    }
</style>

<p title="t1">有title屬性的段落標籤</p>
<p>無title屬性的段落標籤</p>

DEMO

下載DEMO原始碼

注意:以上語法IE6無效

您也可能喜歡這些文章

SEO優化之CSS隱藏關鍵文字

想使用CSS將不必要,但可以增加SEO的關鍵文字隱藏,想要讓google大神搜尋到,又不想在網頁上HTML顯示你這些文字,可以使用下列CSS方法隱藏文字。...