前端技術學習之選擇器(四)

2021-07-25 21:36:28 字數 595 閱讀 1561

四,

結構性偽類選擇

器:empty

:empty選擇器表示的就是空,用來選擇沒有任何內容的元素, 真的是什麼內容都沒有,空格都不能有。

舉例:第乙個

有文字內容,第二個只有乙個空格,第三個為空。:empty

就可以選中第三個

給它新增樣式。

我是乙個段落 ​

執行效果:

五,結構性

偽類選擇

器:target :

target

為目標選擇器,用來匹配相關url指向的元素。:target是個很有意思的結構化偽類選擇器,可以很輕鬆的實現點乙個標題顯示內容,而且還可以用#brand:target p{}這樣配合選擇target下的後代選擇器。

**例子:

第一部分內容

第二部分內容

第三部分內容 執行

效果:

前端技術學習之選擇器(二)

2,根據屬性值選擇 title hello 如果含有值 title world 如果值等於 執行效果 3,特定 屬性選擇型別 title h 當有 屬性title並且title屬性的值是以h或者h 開頭的元素 4,使用 萬用字元的屬性 選擇器 e att val 選擇器匹配元素e,且e元素定義了屬性...

前端學習之 CSS 選擇器

css選擇有三種 html 元素指的是從開始標籤 start tag 到結束標籤 end tag 的所有 元素選擇器通過標籤名選擇元素。p元素 p元素p元素 效果 id選擇器通過id選擇元素,乙個元素的id應該是唯一的。另乙個元素不應該重複使用 p標籤 p1標籤 效果 當需要多個元素,都使用同樣的c...

學習前端之CSS選擇器

css選擇器是個啥子東東?別看它取了個高階的名字,其實就相當於給目標人物取名字,例如 div 我要給上面的div標籤加樣式,首先就要找到它,簡單粗暴的一種,就是直接取div div這樣我們就能給div加樣式了。廢話不多說,選擇器有哪些呢?標籤選擇器 上面的例子就是標籤選擇器,直接是用的標籤名,寫di...