情境1
直接範例解釋
1
2
3
4
5
6
7
8
9
10
11
12
| <ul>
<li class="first-li">1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
|
一般來說如果想對 <li>裡面的字做變色、粗體、斜體，可以透過建立一個class去操作，
舉例：想把所有的第一個li的變粗體，這樣需要如下面class寫法，以及需要在html裡面把所有的第一個li都加上class=’first-li’
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| //css檔案
.first-li {
font-weight:bold;
}
//pseudo class
li:first-child {
font-weight:bold;
}
li:last-child{
font-weight:bold;
}
li:nth-child(2){ //全部第二個
}
li:nth-child(even){ //偶數或奇數 odd
}
|
若是pseudo class則可以寫成上面這樣，還可以有最後一個、指定特定位置、偶數、奇數。
情境2
在這裡還可以是以下狀況
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//狀況1
<div>
<p>1</p>
<div>2</div>
</div>
//狀況2
<div>
<div>0</div>
<p>1</p>
<div>2</div>
</div>
//css
div p:first-child{ // div下的第一個p
font-weight:bold;
}
|
這個狀況其實在狀況2是沒有作用的，雖然是div下的第一個p，但是在div下面的第一個element是 div而非 p ，所以不會成功