css選擇符大雜燴

2021-05-21 20:51:21 字數 2914 閱讀 7674

型別選擇符:單指元素的名字,而沒有大於號和小於號

類選擇符:選擇所有賦有相同類的元素

乙個點號後面跟類名,類選擇符要跟著類名的後面。

可以把加在萬用字元

*的後面來選擇文件中所有賦予該類的元素,

id 選擇符

群組選擇符:多個選擇符用逗號連起來

後代選擇符:多個選擇符用空白連起來

子選擇符:多個選擇符用大於號連起來

首子選擇符:

把:first-child

加在任何選擇符後。

兄弟選擇符:多個選擇符用加號連線起來

屬性存在選擇符:幫你選擇含有某個屬性的元素,用中括號包圍的屬性的名字。

selector[title]

屬性詞彙選擇符:幫你選擇屬性中包含了某個具體詞彙的元素

selector[title = 「word」]

屬性值選擇符:

幫你選擇屬性值中包含了某個具體值的元素

selector[ title =」exact_match_of_entire_value」]

ie6不支援,

ie7支援較好

偽類元素選擇符:

element:first-letter

*.class:first-letter

#id:first-letter

element:first-

line

*.class:first- line

#id:first- line

注意:first-element, first-line

只對終端塊狀元素相搭配,對內聯元素或結構化塊狀元素不起作用。

侷限:ie6

不支援,除非是選擇符鏈中的最後乙個選擇符。

ie7中修正了。

first-letter

與font

,text

屬性搭配很好。瀏覽器不能定位偽類元素,對他們的排列也存為問題,也就是說:

postion

,left

,right

,top

,bottom

偽類元素不起作用。同樣

vertical-align

對偽類的處理也不一致。

瀏覽器也會有一些例外的情況,如他們不能選擇第乙個字母或者選擇不止第乙個字母,例如當或物件放在第乙個字母前,所有主流瀏覽器都不能選擇第乙個字母,比如

opera 9

不會選擇單元格的第乙個字母,

ie6則把列表選項中的第乙個字母和列表標識都一起選擇。最後,偽類元素還會觸發瀏覽器報錯,所有一定要在所有主流瀏覽器中仔細檢查你所使用的偽類元素

當偽類選擇符位於群組選擇符中,

ie6將不能識別他們。必須宣告

doctype

,這樣:first-child

才能在ie

中生效。

偽類選擇符:

a:link , a:visited , a:hover, a:active , a:focus

偽類選擇符只適用於

ie6只支援超連結上的

hover

偽類,ie7

和其他主流瀏覽器支援所有

hover

css2.1

定義兩個額外的偽類:

first-child

,lang

,ie7

支援first-child,

不支援lang

子類選擇符:

html:

class = 「class subclass etc」>

css*.class

*.class.subclass.etc

繼承:模式:繼承

一類內置於

css語言的選擇符,為了應用繼承,你不用做任何事情,當瀏覽器遇到乙個可繼承的元素,自動把後代元素選中,並給他們付上自己的規則。當你為元素附了乙個屬性後,它會覆蓋所有繼承的值(1

)可繼承的屬性:

¡可被所有元素繼承:

visibility, cursor ¡

被內聯元素繼承:

letter-spacing , word-spacing , white-space , line-height , color , font ,font-family , font-size , font –style , font-variant, font-weight , text-decoration , text-transform ,direction ¡

被終端塊狀元素繼承:

text-indent , text-align ¡

被列表元素繼承:

list-style , list-style-type , list-style-position, list-style-image ¡

被**元素繼承:

border-collapse

不可繼承的屬性:

display , margin , border ,padding ,background , height , min-height, max-height, width , min-width, max-width , overflow , position , left, right ,top , bottom, z-index ,float , clear , table-layout, vertical-align, page-break-after , page-break-before, unicode-bidi

侷限:css

提供乙個常量值

inherited ,

可以把它賦給任何屬性,當屬性被附上

inherited

後,該屬性會從他的父親繼承值,這就允許你強制繼承,

ie7及早期的版本都不支援

inherit,

如何為屬性模擬繼承:首先用任何選擇符選中乙個起始元素,然後在選擇符後放乙個空格和乙個萬用字元,

如selecter *

CSS選擇符 屬性選擇符

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名,放在方括號裡 title css不限制屬性選擇符只能使用標籤名,也可以使用類。例如 photo title 用於選取類為photo,而且設定了ti...

CSS選擇符 型別選擇符

h1用於選取特定html標籤的選擇符,叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符,只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小,只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...

CSS 選擇符大全(常用css選擇符)

e 某個元素,如p id 使用id,如 idname class 使用class,如.myclass 萬用字元 包含選擇符 e f e所有的f包含子代,孫代,子子孫孫等等 子選擇符 e相鄰選擇符 e f 和e相鄰的f,相隔乙個都不算 兄弟選擇符 e f 和e同級的f的算 e att e中帶有某個at...