以下均支援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、子元素選擇器
與後代選擇器相比,子元素選擇器只能選擇作為某元素直接子元素的元素。3、同胞選擇器用法:h1 > strong , >符號前後可空格。
h2 + p
/*緊隨h2之後的p*/
h2 ~ p
/*h2之後的全部同胞p*/
4、通配選擇符
*5、偽類選擇符*[lang=zh-cn]
*.div
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屬性 如果某乙個...