1:id選擇器(#myid);
公司主營(yíng)業(yè)務(wù):成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出巴中免費(fèi)做網(wǎng)站回饋大家。
2:類選擇器(.classname);
3:標(biāo)簽選擇器(div,h1,p);
4:相鄰選擇器(h1+p);
5:子選擇器(ulli);
6:后代選擇器(li a);
7:通配符選擇器(*);
1.通配選擇符
語(yǔ)法:
* { sRules }
說(shuō)明:
通配選擇符。選定文檔目錄樹(DOM)中的所有類型的單一對(duì)象。
假如通配選擇符不是單一選擇符中的唯一組成,“*”可以省略。
示例:
*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none; }
2.類型選擇符
語(yǔ)法:
E { sRules }
說(shuō)明:
類型選擇符。以文檔語(yǔ)言對(duì)象(Element)類型作為選擇符。
示例:
td { font-size:14px; width:120px; }
a { text-decoration:none; }
3.屬性選擇符
語(yǔ)法:
E [ attr ] { sRules }
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }
說(shuō)明:
屬性選擇符。
選擇具有 attr 屬性的 E
選擇具有 attr 屬性且屬性值等于 value 的 E
選擇具有 attr 屬性且屬性值為一用空格分隔的字詞列表,其中一個(gè)等于 value 的 E 。這里的 value 不能包含空格
選擇具有 attr 屬性且屬性值為一用連字符分隔的字詞列表,由 value 開始的 E
示例:
h{ color: blue; } /* 所有具有title屬性的h對(duì)象 */ span[class=demo] { color: red; } div[speed=fast][dorun=no] { color: red; } a[rel~=copyright] { color:black; } 4.包含選擇符語(yǔ)法:E1 E2 { sRules }說(shuō)明:包含選擇符。選擇所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。 示例: table td { font-size:14px; }
div.sub a { font-size:14px; }
5.子對(duì)象選擇符
語(yǔ)法:
E1 E2 { sRules }
說(shuō)明:
子對(duì)象選擇符。選擇所有作為 E1 子對(duì)象的 E2 。
示例:
body p { font-size:14px; }
/* 所有作為body的子對(duì)象的p對(duì)象字體尺寸為14px */
div ulli p { font-size:14px; }
6.ID選擇符
語(yǔ)法:
#ID { sRules }
說(shuō)明:
ID選擇符。以文檔目錄樹(DOM)中作為對(duì)象的唯一標(biāo)識(shí)符的 ID 作為選擇符。
示例:
#note { font-size:14px; width:120px;}
7.類選擇符
語(yǔ)法:
E.className { sRules }
說(shuō)明:
類選擇符。在HTML中可以使用此種選擇符。其效果等同于E [ class ~= className ] 。請(qǐng)參閱屬性選擇符( Attribute Selectors )。
在IE5+,可以為對(duì)象的 class 屬性(特性)指定多于一個(gè)值( className ),其方法是指定用空格隔開的一組樣式表的類名。例如:div class=class1 class2。
示例:
div.note { font-size:14px; }
/* 所有class屬性值等于(包含)note的div對(duì)象字體尺寸為14px */
.dream { font-size:14px; }
/* 所有class屬性值等于(包含)note的對(duì)象字體尺寸為14px */
8.選擇符分組
語(yǔ)法:
E1 , E2 , E3 { sRules }
說(shuō)明:
選擇符分組。將同樣的定義應(yīng)用于多個(gè)選擇符,可以將選擇符以逗號(hào)分隔的方式并為組。
示例:
.td1,div a,body { font-size:14px; }
td,div,a { font-size:14px; }
9.偽類及偽對(duì)象選擇符
語(yǔ)法:
E : Pseudo-Classes { sRules }
E : Pseudo-Elements { sRules }
說(shuō)明:
偽類及偽對(duì)象選擇符。
偽類選擇符。請(qǐng)參閱偽類( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]。
偽對(duì)象選擇符。請(qǐng)參閱偽對(duì)象( Pseudo-Elements )[:first-letter :first-line :before :after]。
示例:
div:first-letter { font-size:14px; }
a.fly :hover { font-size:14px; color:red; }
1、標(biāo)簽選擇符:
如p{color:#F00; font-size:36px;},使用p直接作用/p
2、類選擇符:
如 .red{color:#C00;},使用p class="red"直接作用/p
3、ID選擇符:
如 #two{color:#600; font-family:'漢儀行楷簡(jiǎn)';},使用p id="two"直接作用/p
4、包含選擇符:
如 p strong{color:#F00;},使用pstrong直接作用/strong/p
5、通配選擇符:
如 *{color:#0C0; font-size:18px;},可以控制所有的html元素作用范圍很廣,但是效率較低
6、選擇符分組:
如p,h1,div{color:#F00;font-size:36px;},對(duì)p,h1,div都有效
7、標(biāo)簽指定式選擇符:
如p#one{ color:#F00;font-size:36px;},只對(duì)id為one的p標(biāo)簽有效
8、組合選擇符:
將所有選擇符類型組合使用
CSS選擇器以及選擇器優(yōu)先級(jí)
需要掌握優(yōu)先級(jí)的選擇器種類
id選擇器
類名選擇器
標(biāo)簽名選擇器
偽類選擇器
通配符選擇器
除了上面提到的幾種基本選擇器之外,我們還需要了解由基本選擇器組成的群組、后代選擇器的計(jì)算方法。
比較多喲,給你說(shuō)下幾種比較常見的吧:
1、優(yōu)先級(jí)最高的是內(nèi)部選擇器,寫在標(biāo)簽內(nèi)部,例如div style="color:red"/div,這里的color=red是寫在標(biāo)簽內(nèi)部的,所以優(yōu)先級(jí)最高
2、其次是id選擇器
例如div id="d1"/div style #d1{ color:red }/style,這里面#d1就是id選擇器,用#表示, 標(biāo)簽里面是id屬性 樣式是#開始
3、類選擇器
例如div class="c1"/div style .c1{ color:red }/style,這里面.c1就是類選擇器,用.表示,標(biāo)簽里面是class屬性,樣式是 . 開始
4、標(biāo)簽選擇器
以標(biāo)簽名字作為選擇器,這種不常使用
例如:divdiv pp
樣式對(duì)應(yīng):div{ font-size:14px } p{font-size:20px}
由標(biāo)簽選擇器,類選擇器,id選擇器,還可以延伸出很多選擇器,詳細(xì)的可查詢w3c喲
1.id選擇器( # myid)
2.類選擇器(.myclassname)
3.標(biāo)簽選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul li)
6.后代選擇器(li a)
7.通配符選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.偽類選擇器(a:hover, li:nth-child)【by三人行慕課】