第六篇 CSS-03

1.交集選擇器:將兩個選擇器直接連在一起而形成的選擇器被叫做交集選擇器麻昼,如p[align],表示既是p標(biāo)簽又具有align的元素干旧,交集選擇器主要有三種形式

a)標(biāo)簽選擇器+類選擇器

b)標(biāo)簽選擇器+id選擇器

c)標(biāo)簽選擇器+屬性選擇器

2.結(jié)構(gòu)偽類選擇器:所謂結(jié)構(gòu)偽類選擇器驹吮,就是根據(jù)元素的結(jié)構(gòu)關(guān)系選取元素

a):first-child:選取結(jié)構(gòu)中的第一個元素,常用格式為:結(jié)構(gòu)名稱匹配對象:first-child

b):last-child:選取結(jié)構(gòu)中的最后一個元素痰腮,常用格式為:結(jié)構(gòu)名稱匹配對象:last-child

c):nth-child(n):選取結(jié)構(gòu)中從上往下第n個元素(n表示元素的編號,第一個元素編號為1律罢,第二個編號為2膀值,以此類推)棍丐,常用格式:結(jié)構(gòu)名稱匹配對象:nth-child(編號)

d):nth-last-child(n):選取結(jié)構(gòu)中從下往上第n個元素(n表示元素的編號,倒數(shù)第一個元素編號為1沧踏,倒數(shù)第二個編號為2歌逢,以此類推),常用格式:結(jié)構(gòu)名稱匹配對象:nth-last-child(編號)

e):fist-of-type:在結(jié)構(gòu)中按類別選取第一個元素翘狱,常用格式為:結(jié)構(gòu)名稱類別:first-of-type

f):last-of-type:在結(jié)構(gòu)中按類別選取倒數(shù)第一個元素秘案,常用格式為:結(jié)構(gòu)名稱類別:last-of-type

g):nth-of-type(n):在結(jié)構(gòu)中按類別選取正數(shù)第n個元素,常用格式為:結(jié)構(gòu)名稱類別:nth-of-type(編號)

h):nth-last-of-type(n):在結(jié)構(gòu)中按類別選取倒數(shù)第n個元素潦匈,常用格式為:結(jié)構(gòu)名稱類別:nth-last-of-type(n)

i)注意:

odd:表示結(jié)構(gòu)中編號為奇數(shù)的元素

even:表示結(jié)構(gòu)中編號為偶數(shù)的元素

j):first-line:選取塊級元素的第一行文本阱高,格式:匹配對象:first-line

k):first-letter:選取塊級元素的第一個字符,格式:匹配對象:first-letter

l):before:在某個元素的前面插入內(nèi)容茬缩,常結(jié)合content屬性使用赤惊,可以在樣式表中直接對插入的內(nèi)容進(jìn)行修飾

m):after:在某個元素的后面插入內(nèi)容,常結(jié)合content屬性使用凰锡,可以在樣式表中直接對插入的內(nèi)容進(jìn)行修飾

n):enabled:選取可用的表單元素未舟,格式:匹配對象:enabled

o):disabled:選取不可用的表單元素,格式:匹配對象:disabled

p)E~F:選取E后面的所有和F匹配的元素掂为,如:div~p表示選取div后面所有的p標(biāo)簽

q)E+F:選取E后面的離E最近的F裕膀,如:div+p表示選取div后面的離div最近的p(p可能有多個,但是只選離它最近的那一個)

r):root:選取HTML文檔的根元素菩掏,即標(biāo)簽

s):empty:選取文檔中的空元素魂角,所謂空元素就是標(biāo)簽中什么也沒有昵济,連空格也沒有智绸,如

t):not:作用是否定,排除访忿,如p:not(.p2)瞧栗,表示選取所有p標(biāo)簽,但是不包含.p2

u):target:選取錨點

2.選擇器權(quán)重

a)如果選擇器權(quán)重值相同海铆,那么后設(shè)置的樣式會覆蓋先設(shè)置的樣式

b)如果選擇器權(quán)重不同迹恐,那么權(quán)重值大的樣式會覆蓋權(quán)重值小的樣式

標(biāo)簽選擇器:1

類選擇器:10

屬性選擇器:10

結(jié)構(gòu)偽類選擇器:10

id選擇器100

后代選擇器:選擇器權(quán)重之和

子選擇器:選擇器權(quán)重之和

交集選擇器:選擇器權(quán)重之和

繼承的樣式權(quán)重為0

行內(nèi)樣式權(quán)重為1000

群組選擇器權(quán)重為:被連接的選擇器權(quán)重的最大值

3.color:字體顏色

4.font-size:字體大小

5.font-weight:字體粗細(xì),屬性值為normal(默認(rèn))卧斟、bold(加粗)

6.font-style:字體傾斜殴边,normal、italic珍语、oblique

7.font-family:字體類型锤岸,屬性值可以是中文字體,也可以是英文板乙,注意事項

a)如果是中文是偷,或者屬性值有多個單詞構(gòu)成且單詞間有空格,那么屬性值需要用雙引號括起來

b)可以設(shè)置多個字體類型,類型間用逗號分隔蛋铆,瀏覽器在解析時會從前向后選擇字體類型馋评,選到誰用誰

8.font的復(fù)合形式:font:加粗傾斜大小/行高類型,注意復(fù)合形式時刺啦,屬性值可以部分省略留特,被省略的值采用默認(rèn)值,字體大小和類型是不可以省略的

9.line-height:設(shè)置的是行高洪燥,屬性值可以是像素值磕秤,百分比,em捧韵,ling-height的應(yīng)用

a)單行文本垂直居中:行高=高度市咆,如果行高小于高度,文本在中分線以上再来,如果行高大于高度蒙兰,文本在中分線以下

b)多行文本要將容器平分,可以使行高=高度/行數(shù)

10.text-decoration:文本修飾芒篷,屬性值為underline(下劃線)搜变、overline(上劃線)、line-through(刪除線)针炉、none(無)

11.text-indent:設(shè)置文本的首行縮進(jìn)挠他,屬性值為像素值,em篡帕、百分比殖侵,注意:該屬性適用于塊元素及行內(nèi)塊元素

12.text-shadow:設(shè)置文本陰影效果(CSS3新增屬性),格式:text-shadow:水平位移值垂直位移值陰影模糊半徑陰影顏色镰烧,注意一個元素可以設(shè)置多重陰影效果拢军,效果間用逗號分隔,如text-shadow: 0 0 5px red, 10px 10px 10px blue,

20px 20px 15px yellow;

13.text-transform:設(shè)置字母表現(xiàn)怔鳖,uppercase(所有字母大寫)茉唉、lowercase(所有字母小寫)、capitalize(單詞首字母大寫)

14.word-spacing:單詞間距结执,屬性值為像素值

15.letter-spacing:字符間距度陆,屬性值為像素值

16.text-align:設(shè)置文本水平居中,屬性值為left献幔、center懂傀、right,注意斜姥,該屬性的適用對象為塊元素

17.white-space:空白元素的處理(其實就是兩個方面:1.空格是否合并2.內(nèi)容是否換行)鸿竖,屬性值為normal沧竟、pre、nowrap缚忧、pre-wrap悟泵、pre-line

a)normal:默認(rèn),合并空格闪水,換行

b)pre:不合并空格糕非,不換行

c)nowrap:合并空格,不換行

d)pre-wrap:不合并空格球榆,換行

e)pre-line:作用等同于normal朽肥,合并空格,換行

?[?A??32u??

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末持钉,一起剝皮案震驚了整個濱河市衡招,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌每强,老刑警劉巖始腾,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異空执,居然都是意外死亡浪箭,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進(jìn)店門辨绊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來奶栖,“玉大人,你說我怎么就攤上這事门坷⌒桑” “怎么了?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵拜鹤,是天一觀的道長框冀。 經(jīng)常有香客問我流椒,道長敏簿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任宣虾,我火速辦了婚禮惯裕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘绣硝。我一直安慰自己蜻势,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布鹉胖。 她就那樣靜靜地躺著握玛,像睡著了一般够傍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上挠铲,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天冕屯,我揣著相機與錄音,去河邊找鬼拂苹。 笑死安聘,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的瓢棒。 我是一名探鬼主播浴韭,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼脯宿!你這毒婦竟也來了念颈?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤连霉,失蹤者是張志新(化名)和其女友劉穎舍肠,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體窘面,經(jīng)...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡翠语,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了财边。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肌括。...
    茶點故事閱讀 40,115評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖酣难,靈堂內(nèi)的尸體忽然破棺而出谍夭,到底是詐尸還是另有隱情,我是刑警寧澤憨募,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布紧索,位于F島的核電站,受9級特大地震影響菜谣,放射性物質(zhì)發(fā)生泄漏珠漂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一尾膊、第九天 我趴在偏房一處隱蔽的房頂上張望媳危。 院中可真熱鬧,春花似錦冈敛、人聲如沸待笑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽暮蹂。三九已至寞缝,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間仰泻,已是汗流浹背第租。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留我纪,地道東北人慎宾。 一個月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像浅悉,于是被迫代替她去往敵國和親趟据。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,055評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案术健? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,754評論 1 92
  • CSS選擇器 1)標(biāo)簽選擇器(標(biāo)簽) 語法: 元素名稱{屬性:屬性值汹碱;...} 2)id選擇器(#) 語法: ...
    xiaolizhenzhen閱讀 561評論 0 0
  • 轉(zhuǎn)載自牢記31種CSS選擇器用法 1 * 星號選擇器用于選取頁面中的所有元素,可用于快速清除所有元素的 margi...
    Icestains閱讀 1,229評論 0 1
  • display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系:它們都能讓元素不可見 區(qū)別...
    紋小艾閱讀 1,490評論 0 1
  • 其實平時用得多的選擇器無非也就是那么幾個荞估,時間久了咳促,許多不常用的選擇器就慢慢忘記了。為了不讓自己忘記這些選擇器勘伺,今...
    盛夏晚清風(fēng)閱讀 1,834評論 0 5