iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 7

網頁選擇器-30天學會HTML+CSS,製作精美網站

在寫網頁樣式時,最重要的就是選擇器的使用,寫得好容易理解,修改沒煩惱,也可以讓網頁快速呈現效果。以下會介紹css有哪些選擇器及使用方法

通用選取器

樣式套用在所有元素上

*{...}

範例:將所有元素的文字顏色套用藍色

<h1>title</h1>
<h2>sub title</h2>
<p>content</p>
*{
	color:blue;
}

https://ithelp.ithome.com.tw/upload/images/20210922/201120531AjASQ1TXT.png

標籤選擇器

使用html標籤做選擇器,將檔案裡面有使用到的標籤直接修改樣式,適合用來定義全站通用的樣式。通常都會建議設定樣式時給予class名稱。

element{...}

範例:設定<ul>不要項目標籤,當所有頁面裡有使用到<ul>就都不會有項目符號,除非另外各別做設定,範例中我將一個<ul>class名稱設定為"hastype",並給予它disc的樣式。

<ul>
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>
<ul>
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>
<ul class="hastype">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>
ul{
	list-style-type: none;
}
.hastype{
	list-style-type: disc;
}

https://ithelp.ithome.com.tw/upload/images/20210922/20112053n8ExhQLM9i.png

class選擇器

在網頁中,會有兩個地方以上使用到相同的樣式時,就可以使用class選擇器。

class選擇器會使用「.」加上名稱,通常也會建議html標籤給有意義的名稱,避免針對標籤做樣式修改時,只要有使用到的地方就會被套用樣式。

.classname{....}

範例:我要設定class="box"裡面的<p>標籤字體大小為14px、顏色為#999,但如果我指針對<p>標籤做設定,所有使用到<p>標籤的樣式都會被套用

<div class="box">
	<h2 class="title">title</h2>
	<p>content2</p>
</div>
<ul>
	<li><p>item1</p></li>
	<li><p>item2</p></li>
	<li><p>item3</p></li>
</ul>
.title{
	margin-bottom:5px;
	font-size:18px;
}
p{
	font-size:14px;
	color:#999;
	margin: 0;
}

https://ithelp.ithome.com.tw/upload/images/20210922/20112053xUv0GVkVfP.png
所以要將樣式改為 .box p{...},box名稱區塊下層的<p>標籤

.box > p{
	font-size:14px;
	color:#999;
	margin: 0;
}

id選擇器

在一個頁面裡,id名稱不可以重複,是唯一值,就像身分證一樣不會重複。id選擇器使用「#」加上名稱,比較常用在javascript動態網頁來控制html組件,用法與class選擇器相同,只是「.」改為「#」。

#idname{....}

群組選擇器

同時設定多個選取器樣式,並用「,」逗號隔開,這樣可以避免重複寫相同的css樣式

element,element{...}

範例:將.box head及.list li背景色設為#efefef

<div class="box">
	<div class="head">head</div>
	<div class="body">
		<p>content</p>
	</div>
</div>

<ul class="list">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>
.box .head, .list li{
	background-color:#efefef;
}
p{
	margin:0;
}
.list li{
	margin-bottom:5px;
}

https://ithelp.ithome.com.tw/upload/images/20210922/201120531IGQXLxxZi.png

組合選擇器

後代選擇器

E F,選取E元素內的F元素,以「半形空格」隔開兩個元素

E F{...}

範例:選取元素內的元素

<ul class="list">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
</ul>
.list li{
	color: #333;
}

子選擇器( > )

與後代選擇器不同,子選擇器只選取向下一層的子元素,選取E元素下一層的F元素,以「>」隔開兩個元素

E > F{...}

範例:將box名稱的下一層元素文字設定為藍色

<div class="box">
	<p>content</p>
	<ul class="list">
		<li><p>item1</p></li>
		<li><p>item2</p></li>
		<li><p>item3</p></li>
	</ul>
</div>
.box > p{
		color:blue;
}

https://ithelp.ithome.com.tw/upload/images/20210922/20112053JdL6WvAL9U.png
如果只針對box名稱內的元素,所有使用元素的都會變藍色文字

<div class="box">
	<p>content</p>
	<ul class="list">
		<li><p>item1</p></li>
		<li><p>item2</p></li>
		<li><p>item3</p></li>
	</ul>
</div>
```css
.box  p{
    color:blue;
}

https://ithelp.ithome.com.tw/upload/images/20210922/20112053HSEdO1ETKn.png

相鄰選擇器( + )

只會選取E元素相鄰的第一個F元素

E + F{....}

我自己比較常用到的地方是做選單的樣式,設定元素與元素中間有線條做分隔

<nav class="navbar-box">
		<a href="#">menu</a>
		<a href="#">menu</a>
		<a href="#">menu</a>
		<a href="#">menu</a>
		<a href="#">menu</a>
		<a href="#">menu</a>
</nav>
.navbar-box{
	display:inline-block;
}
.navbar-box a{
	color:#333;
	text-decoration: none;
	padding:0 10px;
}
.navbar-box a+a{
	border-left: 1px solid #ccc;
}

https://ithelp.ithome.com.tw/upload/images/20210922/201120534bBxZpLymY.png

間接選擇器( ~ )

設置E元素之後的F元素

E ~ F{...}

範例:將red-after名稱之後的都設為紅色文字

<ul>
	<li>item1</li>
	<li>item2</li>
	<li class="red-after">item3</li>
	<li>item4</li>
	<li>item5</li>
</ul>
.red-after ~ li{
	color: red;
}

https://ithelp.ithome.com.tw/upload/images/20210922/20112053HqHlLu9Vvr.png
參考資料:
https://medium.com/ui-ux練功坊/css選擇器介紹-1-ec19bc5b33a
https://injerry.pixnet.net/blog/post/38847966


上一篇
語意標籤-30天學會HTML+CSS,製作精美網站
下一篇
偽類與偽元素-30天學會HTML+CSS,製作精美網站
系列文
30天學會HTML+CSS,製作精美網站30

尚未有邦友留言

立即登入留言