css選擇器高階

2021-10-25 01:59:49 字數 779 閱讀 4289

1、 屬性選擇器、屬性和值選擇器

2、 相鄰兄弟選擇器

3、 後代選擇器(包含選擇器)

4、 子元素選擇器

5、 選擇器分組

1、屬性選擇器、屬性和值選擇器:

/*1、 為帶有 title 屬性的所有元素設定樣式: */

[title]

/*2、 為 title="haha" 的所有元素設定樣式: */

[title=haha]

/*3、 為 title的屬性值中包含指定詞彙的所有元素設定樣式,適用於由空格分隔的屬性值 */

[title~=haha]

/*4、 為 title屬性以指定值開頭的元素設定樣式,該值必須是整個單詞(不能是乙個單詞的一部分)適用於由連字元分隔的屬性值 */

[title|=haha]

2、相鄰兄弟選擇器:

可選擇緊接在另一元素後的元素,且二者有相同父元素

/* 選擇緊接在 h1 元素後出現的段落,h1 和 p 元素擁有共同的父元素 */

h1 + p

3、後代選擇器(包含選擇器):

後代選擇器可以選擇作為某元素後代的元素,以空格分隔。

4、子元素選擇器:

子元素選擇器(child selectors)只能選擇作為某元素子元素的元素,不能隔代,用 「 > 」來指向子代

h1 > strong

5、選擇器分組):

用逗號分隔

CSS高階選擇器

css高階選擇器 例子 並集選擇器 p,h1 p和h1 標籤文字變紅色 交集選擇器 標籤選擇器 id 選擇器或者標籤選擇器 類選擇器 p.class1 類名為 class1 的p 標籤樣式中文字為黃色,當不同標籤使用相同類名時 後代選擇器 巢狀標籤 p span 注意兩者標籤中有空格的 this i...

css高階選擇器

css3高階選擇器 偽類選擇器 p first of type 匹配同型別中的第乙個同級兄弟元素p p last of type 匹配同型別中的最後乙個同級兄弟元素p p first child 匹配父元素的第乙個子元素p。p last child 匹配父元素的第乙個子元素p。p nth child...

CSS高階選擇器

舉例 123 其中a為類,a 1為偽類,偽類也是一種類,他們之間用宮格隔開 我們選擇該標籤的時候可以.a.a 1,也有.a,也可以.a 1常用的兩個偽類選擇器 偽類選擇器都是用 連線的 類名 nth of type n 先確定選擇器,在匹配位置 舉例 第1個p 第2個p 第3個p 第4個p 第5個p...