Css-基本認知( 二 )_樣式宣告、選擇器

前一篇 :

那我們要如何去宣告 ?
那宣告的格式為何 ?

1 . 宣告樣式方法

選擇器 {
    <!-- 屬性 : 參數 ; -->
    樣式
}

2 . 我們知道公式後，要怎麼套用 ?

選擇器 : 簡單來說，我要把這樣式套用在哪裡。
樣式 : 字體大小、顏色...等。

接下來這篇介紹選擇器 :

• Html 標籤
• 物件名稱
• ID 名稱
• 子項選擇器
• 後代選擇器
• 通用選擇器
• 多組選擇器

1 ) Html 標籤

p{
   color:red;
}

2 ) 物件名稱 : 選擇器前面有加 "."

.setColor{
   color:red;
}
<span class="setColor">Tom</span>

3 ) ID 名稱 : 選擇器前面有加 "#"，但是 ID 多用於辨識元件或讀取參數

#setColor{
    <!-- 屬性 : 參數 ; -->
   color:red;
}
<span id="setColor">Tom</span>

4 ) 子項選擇器 : 某元件底下一層的元件 ( 只對一層 )，中間會用 : >

.ttable>li {
    <!-- 屬性 : 參數 ; -->
   border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

5 )  後代選擇器 : 某元件底下所有被選擇到的元件 : 中間會用 : _ ( 空白 )

.ttable li {
    border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

為了讓大家更能了解到 4 、 5 的差異

6 ) 通用選擇器 : 全部的標籤都會被套用到樣式，會使用 : *

*{
    border:1px solid red;
}

<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

7 ) 多組選擇器 : 共用相同的樣式，減少重複的風格樣式，會使用 : ，

h1,span{color:red;}

3 . 樣式權重

p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/

同選擇器具權重 : 標籤遠近

<style>
p{color:red;}
p{color:green;} V
</style>

最重要 !important

<style>
p{color:red!important;} V
p{color:green;} 
</style>

歡迎轉載，請註明出處。