css 3 基礎選擇器。

2021-07-28 05:04:30 字數 2298 閱讀 8932

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不算。這個太坑。

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

cc3 還有其他選擇器,如 q元素應用與不同語言版本的引用風格設定

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...