CSS3 結構性偽類選擇器 target

2022-03-02 16:04:50 字數 1017 閱讀 2148

:target選擇器稱為目標選擇器,用來匹配文件(頁面)的url的某個標誌符的目標元素。我們先來上個例子,然後再做分析。

示例展示

點選鏈結顯示隱藏的段落。

html**:

id="brand">

content for brand

css**:

.menusection

:target

演示結果:

分析:

1、具體來說,觸發元素的url中的標誌符通常會包含乙個#號,後面帶有乙個標誌符名稱,上面**中是:#brand

2、:target就是用來匹配id為「brand」的元素(id="brand"的元素),上面**中是那個div元素。

多個url(多個target)處理:

就像上面的例子,#brand與後面的id="brand"是對應的,當同乙個頁面上有很多的url的時候你可以取不同的名字,只要#號後對的名稱與id=""中的名稱對應就可以了。

如下面例子:

html**:  

brand">

content for brand

jake">

content for jake

aron">

content for aron

css**:

#brand:target 

#jake:target

#aron:target

CSS3選擇器 結構性偽類選擇器

在學習結構性偽類選擇器之前,先了解2個概念 css中的偽類選擇器和偽元素 1 偽類選擇器 css中已經定義好的選擇器,不能隨便取名 常用的偽類選擇器是使用在a元素上的幾種,如a link a visited a hover a active 2 偽元素選擇器 並不是針對真正的元素使用的選擇器,而是針...

css3結構性偽類選擇器 target

target選擇器稱為目標選擇器,用來匹配文件 頁面 的url的某個標誌符的目標元素。我們先來上個例子,然後再做分析。html content for brand css menusection target 演示結果 分析 1 具體來說,觸發元素的url中的標誌符通常會包含乙個 號,後面帶有乙個標...

css3結構性偽類選擇器 last child

last child 選擇器與 first child 選擇器作用類似,不同的是 last child 選擇器選擇的是元素的最後乙個子元素。例如,需要改變的是列表中的最後乙個 li 的背景色,就可以使用這個選擇器,ul li last child 示例演示 在部落格的排版中,每個段落都有15px的m...