2017年12月8日 星期五

介紹CSS的選擇器總共有這幾種,今天介紹其中之一組合選擇器:

CSS的選擇器有:

1.元素選擇器
2.類別選擇棄
3.識別碼選擇器
4.組合選擇器
5.虛擬類別

而今天要介紹的是組合選擇器。
組合選擇器意思是透過前面三種選擇器的組合來指定後代或者是相鄰的元素。

它的語法有四種:
1.A B
2.A>B
3.A~B
4.A+B


以下是原始程式檔案:




尚未使用任何CSS時的畫面如下:





接下來會以組合選擇器來介紹這四種各別是什麼。








A B

這個意思是樣式規則作用在A的所有後代
結果如下

















A>B

這個意思是樣式規則作用在A的第一個後代
舉例如下:
li的第一個後代會有這樣的樣式
 結果如下:





A~B

A的同層所有元素

結果如下


























A+B

 這個語法的意思是樣式規則作用在A的相鄰的同層元素,指的是在A以後的。
程式如下



結果如下

沒有留言:

張貼留言

Cursor Auto-Run 完整指南:為什麼已開啟卻不會自動執行?(含真正能自動跑的方法)

Cursor Auto-Run 完整指南:為什麼開啟卻不會自動執行? 🚀 Cursor Auto-Run 完整指南:為什麼已開啟卻不會自動執行?(含真正能自動跑的方法) Cursor 是目前最強大的 AI 程式...