css3
選擇器。
基礎選擇器 *
通配選擇器
選中所有,不建議使用 e
元素選擇器,
在rest.css
經常用到,用與將各個瀏覽器元素預設樣式統一
#id id
選這器
.class
類選擇器
selector
,selectorn
群租選擇器。
以上的我們比較常用,而且所有瀏覽器都支援的
css選擇器。
層次選擇器
css
最新版本
ie 必須
7+
以上特殊的選擇器語法
1.
e f
後代選擇器
所有瀏覽器都支援,但是不建議層級過深,最好不要超過
3級。如果超
請使用eclass_fclass
的命名,提公升
css執行效率
執行效果是所有匹配
e元素中包含的所有元素
f 返回的是f
css 中
.e .f
html呈現
我被設定成了黑色
」>
我被設定成了黑色
」>
我被設定成了黑色
」>
我被設定成了黑色
」>
2.
e>f
子選擇器
ie 7
以上,360
相容模式也行
css 中
.e> .f
html呈現
我被設定成了紅色
」>
我被設定成了紅色
」>
我是後代元素,不是子元素我不會變成紅色
」>
不是子元素我不會變成紅色
」>
3.
e+f
相鄰兄弟選擇器 .
e+div
class=
"view"
>
class=
"f"
title=
"我不是被選中的"
>
class=
"e">
class=
"f"
title=
"啦啦啦我是被選中的"
>
class=
"f"
title=
"我不是被選中的"
>
4.
e~f
通用兄弟選擇器 .
e~div
class=
"view"
>
class=
"f"
title=
"我不是被選中的"
>
class=
"e">
class=
"f"
title=
"啦啦啦我是被選中的"
>
class=
"f"
title=
"啦啦啦我是被選中的"
>
偽類選擇器
錨點遵守 愛恨原則 love/hate
link-visited-hover-active; 焦點
focus 主要用於input
以上偽類尋找器 hover active focus 是任何元素都可以使用的。
具體如何使用
此處針對偽類我做了乙個簡單的手風琴效果。
原始碼,如下 偽類的選擇器支援ie8+ 和其他最新主流瀏覽器, 360不算。這個太坑。
cc3 還有其他選擇器,如 q元素應用與不同語言版本的引用風格設定html
>
class=
"accoridonmenu"
>
class=
"menusection"
id="brand"
>
lorem ipsum dolir sit
class=
"menusection"
id="promotion"
>
lorem ipsum dolor sit amet
class=
"menusection"
id="event"
>
lorem ipsum dolor sit amet
css3中的結構偽類選擇器,這乙個是重點下一次我單獨再講。
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
CSS3基礎選擇器
選擇器分組 多個選擇器使用同乙個樣式 h1,h2,astrong 選擇器繼承 body中未設定樣式的會使用繼承得到的樣式 body 派生選擇器 通過元素在其位置的上下關係來定義樣式 li strong 派生選擇器與id選擇器 派生選擇器 通過元素在其位置的上下關係來定義樣式 li strong id...
css3基礎選擇器
知識點一 圓形 border radius 左上角 右上角 右下角 左下角 大小越靠近寬度和高度,角度就越大 知識點二 相容性問題 webkit 谷歌 safari o 歐朋 ms ie moz 火狐 知識點三 pc端除錯移動端方法 iphone 解析度是最小的 知識點四 選擇器 一 屬性選擇器 a...