[CSS]樣式選擇方式

每當CSS樣式越寫越多,越寫越複雜,我們需要有清楚的腦袋知道CSS選擇的是哪些tag,這裡可以參考小資訊。

你可以把CSS看作選擇器

我們跟CSS溝通要選擇P這個原生tag

style.css
p {
    color: green;
}
代表我選擇P這個Tag讓文字變成綠色的 

自創id和class

到後面CSS樣式很多,同一個tag不可能都只用一樣的樣式,這時候id和class自創屬性給他們就相當的實用,而且大多數的時候建議不要擅自改變tag的原生屬性以免將來很難維護。

在html檔案裡面繕寫

index.html
<div id="green">Yahoo!</div>
<p class="blue">Hello!</p> 

在CSS裡像以下為他們冠上屬性

style.css
#green {
    color: green;
}
.blue {
    color: blue;
}

注意!一個id在body裡面只能使用一次!

逗號(,)為一次選擇多個

style.css
h1 {
    color: blue;
}

h2 {
    color: blue;
} 

可以簡寫為

style.css
h1, h2 {
    color: blue;
} 

選擇一個tag裡的另一個tag

我們可以選擇一個tag裡的幾個tag改變他們的樣式

index.html
<div class="content">Hello, my name is <strong class="name">Kurt</strong>, how are you?</div> 

此時我只想改變這個content裡的name

style.css
.content .name {
    color: blue;
} 

選擇擁有該屬性的tag

很多時候tag會加入一些其他的元素,我們也可以利用這個元素來讓CSS選擇到此tag

index.html
<h2 title="index">Hello world</h2>

<h2>Hello world</h2>

我們用利用給他的元素title讓CSS做選擇

style.css
[title] {
    color: red;
}

當然也可以指定明確

style.css
[title=index] {
    color: red;
} 
comments powered by Disqus