第六篇 CSS-03

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

a)標簽選擇器+類選擇器

b)標簽選擇器+id選擇器

c)標簽選擇器+屬性選擇器

2.結構偽類選擇器:所謂結構偽類選擇器,就是根據元素的結構關系選取元素

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

b):last-child:選取結構中的最后一個元素,常用格式為:結構名稱匹配對象:last-child

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

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

e):fist-of-type:在結構中按類別選取第一個元素,常用格式為:結構名稱類別:first-of-type

f):last-of-type:在結構中按類別選取倒數第一個元素,常用格式為:結構名稱類別:last-of-type

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

h):nth-last-of-type(n):在結構中按類別選取倒數第n個元素,常用格式為:結構名稱類別:nth-last-of-type(n)

i)注意:

odd:表示結構中編號為奇數的元素

even:表示結構中編號為偶數的元素

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

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

l):before:在某個元素的前面插入內容,常結合content屬性使用,可以在樣式表中直接對插入的內容進行修飾

m):after:在某個元素的后面插入內容,常結合content屬性使用,可以在樣式表中直接對插入的內容進行修飾

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

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

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

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

r):root:選取HTML文檔的根元素,即標簽

s):empty:選取文檔中的空元素,所謂空元素就是標簽中什么也沒有,連空格也沒有,如

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

u):target:選取錨點

2.選擇器權重

a)如果選擇器權重值相同,那么后設置的樣式會覆蓋先設置的樣式

b)如果選擇器權重不同,那么權重值大的樣式會覆蓋權重值小的樣式

標簽選擇器:1

類選擇器:10

屬性選擇器:10

結構偽類選擇器:10

id選擇器100

后代選擇器:選擇器權重之和

子選擇器:選擇器權重之和

交集選擇器:選擇器權重之和

繼承的樣式權重為0

行內樣式權重為1000

群組選擇器權重為:被連接的選擇器權重的最大值

3.color:字體顏色

4.font-size:字體大小

5.font-weight:字體粗細,屬性值為normal(默認)、bold(加粗)

6.font-style:字體傾斜,normal、italic、oblique

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

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

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

8.font的復合形式:font:加粗傾斜大小/行高類型,注意復合形式時,屬性值可以部分省略,被省略的值采用默認值,字體大小和類型是不可以省略的

9.line-height:設置的是行高,屬性值可以是像素值,百分比,em,ling-height的應用

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

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

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

11.text-indent:設置文本的首行縮進,屬性值為像素值,em、百分比,注意:該屬性適用于塊元素及行內塊元素

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

20px 20px 15px yellow;

13.text-transform:設置字母表現,uppercase(所有字母大寫)、lowercase(所有字母小寫)、capitalize(單詞首字母大寫)

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

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

16.text-align:設置文本水平居中,屬性值為left、center、right,注意,該屬性的適用對象為塊元素

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

a)normal:默認,合并空格,換行

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

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

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

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

?[?A??32u??

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,546評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,570評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,505評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,017評論 1 313
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,786評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,219評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,287評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,438評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,971評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,796評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,995評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,540評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,230評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,918評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,697評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,776評論 1 92
  • CSS選擇器 1)標簽選擇器(標簽) 語法: 元素名稱{屬性:屬性值;...} 2)id選擇器(#) 語法: ...
    xiaolizhenzhen閱讀 567評論 0 0
  • 轉載自牢記31種CSS選擇器用法 1 * 星號選擇器用于選取頁面中的所有元素,可用于快速清除所有元素的 margi...
    Icestains閱讀 1,254評論 0 1
  • display: none; 與 visibility: hidden; 的區別 聯系:它們都能讓元素不可見 區別...
    紋小艾閱讀 1,600評論 0 1
  • 其實平時用得多的選擇器無非也就是那么幾個,時間久了,許多不常用的選擇器就慢慢忘記了。為了不讓自己忘記這些選擇器,今...
    盛夏晚清風閱讀 1,858評論 0 5