css3結構性偽類選擇器 target

2021-09-08 07:47:49 字數 935 閱讀 7156

:target選擇器稱為目標選擇器,用來匹配文件(頁面)的url的某個標誌符的目標元素

我們先來上個例子,然後再做分析。

html**:

content for brand

css**:

.menusection

:target

演示結果:

分析:

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

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

多個url(多個target)處理:

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

如下面例子:

html**:  

content for brand

content for jake

content for aron

#brand:target 

#jake:target

#aron:target

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

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

css3結構性偽類選擇器 last child

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

CSS3 結構性偽類選擇器 target

target選擇器稱為目標選擇器,用來匹配文件 頁面 的url的某個標誌符的目標元素。我們先來上個例子,然後再做分析。示例展示 點選鏈結顯示隱藏的段落。html id brand content for brand css menusection target 演示結果 分析 1 具體來說,觸發元素...