css2的幾種特殊選擇器

2021-07-12 06:52:54 字數 1477 閱讀 3380

以下均支援ie6以上版本的瀏覽器

1、屬性選擇器

[title]

[title=qjyue77]

[title~=hello] 

上面的樣式對下面的html的效果為:

可以應用樣式:h1>

title="hello world">hello worldh2>

title="student hello">hello w3school students!h1>

無法應用樣式:h1>

title="world">hello worldh2>

title="student">hello w3school students!p>

[title|=en] 

上面的樣式對下面的html的效果為:

可以應用樣式:h1>

title="en">hello!p>

title="en-us">hi!p>

無法應用樣式:h1>

title="us">hi!p>

title="zh">hao!p>

div

[class^="test"]

div

[class$="test"]

div

[class*="test"]

2、子元素選擇器

與後代選擇器相比,子元素選擇器只能選擇作為某元素直接子元素的元素。

用法:h1 > strong , >符號前後可空格。

3、同胞選擇器

h2 + p

/*緊隨h2之後的p*/

h2 ~ p

/*h2之後的全部同胞p*/

4、通配選擇符

*

*[lang=zh-cn]

*.div

5、偽類選擇符

a

:link

/* 未訪問的鏈結 */

a:visited

/* 已訪問的鏈結 */

a:hover

/* 滑鼠移動到鏈結上 */

a:active

/* 選定的鏈結 */

p

:first-child

li:first-child

p > i

:first-child

【注意:在ie中,必須宣告doctype>,這樣:first-child才能生效。】

—整理自w3school

CSS2的選擇器

選擇器 在 之前的部分就是 選擇器 選擇器 指明了 中的 樣式 的作用物件,也就是 樣式 作用於網頁中的哪些元素。p 在html中用class 類選擇器名稱 引用 類選擇器名稱 在html中用id id選擇器名稱 引用 id選擇器名稱類選擇器與id選擇器的異同 兩者都能作用於所有標籤,不同的是 在乙...

前端學習筆記 CSS 2 選擇器

交集選擇器 選擇器1 選擇器2 選擇器3 p h1 div選擇器分組 並集 選擇器1,選擇器2,選擇器3,選擇器4 p,h1,div,sapn子元素選擇器 父元素 子元素 div span後代元素選擇器 祖先 後代 div span兄 弟後面所有的兄弟選擇器 不會選中前面的兄弟 兄 弟指定屬性為ti...

CSS2偽類選擇器要點

有四個選擇器,分別是 hover 滑鼠懸停 link 鏈結不能使用時 visited 鏈結被點選後 active 鏈結被點選時,如果滑鼠不放,就會一直觸發active屬性 link在w3c中記錄為鏈結未被點選時,實際上是當href屬性不能使用時觸發,列如南達科他級 此時會啟用link屬性 如果某乙個...