2013/08/12

CSS選擇器

CSS是一種style sheet language，它的目的為的是HTML以及XHTML的標籤語言。CSS可以去跟網頁溝通要如何顯示畫面出來，並可以透過CSS語法令網頁變得更加美觀。


CSS選擇器則是用來選擇標籤和屬性，並套用效果


<!DOCTYPE html>

<html lang="zh-tw">
    <head>
        <meta charset="utf-8" />
        <title>CSS Demo1</title>
        <link rel="stylesheet" type="text/css"  href="./StyleSheet.css">
    </head>
    <body>
        <div class="Class">
            Class selectors(類別選擇器)：在CSS以.為開頭，一張網頁上面可以有多種重複的Class名稱 
        </div><br>

        <div id="ID">
            ID selectors(ID選擇器)：在CSS以#為開頭，一張網頁上不能與其他的ID重複
        </div><br>

        <div id="Type">
            <b>Type selectors(種類選擇器)：HTML標籤，會套用到相同的標籤上</b>
        </div>

        <div id="Groups">
            <h1>Groups of selectors(群組選擇器)：用,的方式將想套用的效果一次套用到這些標籤</h1>
            <h2>Groups of selectors(群組選擇器)：用,的方式將想套用的效果一次套用到這些標籤</h2>
            <h3>Groups of selectors(群組選擇器)：用,的方式將想套用的效果一次套用到這些標籤</h3>
        </div>

        <div id="Descendant">
            <h1>
                <a>Descendant combinator(後代選擇器)：只有在A元素裡面的B元素才會被改變</a>
            </h1>
        </div>

        <div id="Child">
            <b>Child combinator(子選擇器):利用 A > B去選擇A的兒子，並套用效果。與後代不同的是在中間插入其他元素就不是父子關係了</b>
        </div><br>

        <div title="Attribute">
           Attribute selectors(屬性選擇器)：會去尋找到合適的屬性的標籤進行套用
        </div>

        <div id="Adjacent">
            <b>該層不會改變，僅套用種類選擇器的效果</b>
            <p>
               Adjacent sibling combinator(同層相鄰選擇器)：因為b跟p都在同一層，所以鄰近的p會套用效果
            </p>
            <p>該層不會被改變</p>
        </div><br>

        <div id="General">
            <a>該層不會改變，僅套用種類選擇器的效果</a>
            <p>General sibling combinator(同層全體選擇器)：因為a跟p都在同一層，所有的p都會套用效果</p>
            <p>該層會被改變</p>
        </div><br>

    </body>
</html>







body {
    background-color: grey;
}

.Class {
    color: burlywood;
}

#ID {
    color: darkseagreen;
}

b {
    color: yellow;
}

h1,h2,h3 {
    color: Green;
}

h1 a {
    color: purple;
}

div[title=Attribute] {
    color: deeppink;
    font-size: 20px;
}

#Child >b {
    color: turquoise;
}

b + p {
    color: indigo;
}

a ~ p {
    color: lightsteelblue;
}


執行畫面如下：


參考資料：
http://www.1keydata.com/css-tutorial/tw/syntax.php
http://reference.sitepoint.com/css/selectorgrouping
http://blog.fishsaut.com/2010/03/css-selector.html
http://www.mukispace.com/css-selectors-introduce/
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
By at
標籤: