1.僞類選擇器
僞類專門用來表示元素的一種特殊的狀态
比如:通路過的超連結、普通的超連結、擷取焦點的文本框當我們需要為處在這些特殊狀态的元素設定樣式時,就可以使用僞類
正常連結:-a:link
通路過的連結:-a:visited(隻能定義字型顔色)
滑鼠滑過的連結:-a:hover
正在點選的連結:-a:active
擷取焦點:-:focus
選中的元素:-::selection
2.僞元素
使用僞元素來表示元素中的一些特殊的位置
指定元素前:-:before
指定元素後:-:after
3.屬性選擇器
屬性選擇器可以挑選帶有特殊屬性的标簽
文法:
【屬性名】
【屬性名="屬性值"】
【屬性名~="屬性值"】
【屬性名|="屬性值"】
【屬性名^="屬性值"】
【屬性名$="屬性值"】
【屬性名*="屬性值"】
4.子選擇器
:first-child 可以選中第一個子元素
:last-child 可以選中最後一個子元素
:nth-child 可以選中任意位置的子元素該選擇器後邊可以指定一個參數,指定要選中第幾個子元素
:first-of-type
:last-of-type
:nth-of-type
和child類似,隻不過child是在所有的子元素中找而type是在目前類型的子元素中找
even 表示偶數位置的子元素
odd 表示奇數位置的子元素
5.兄弟選擇器
作用:除了根據祖先父子關系,還可以根據兄弟關系查找元素
文法:
查找後面一個兄弟元素:兄弟元素+兄弟元素{}
查找後面所有的兄弟元素:兄弟元素~兄弟元素{}
6.否定僞類
作用:可以從已選中元素中剔出某些元素
文法::not(選擇器)
7.樣式的繼承
像兒子可以繼承父親的遺産一樣,在CSS中,祖先元素上的樣式,也會被他的後代元素所繼承
利用繼承,可以将一些基本的樣式設定給祖先元素,這樣所有的後代元素将會自動繼承這些樣式但是,并不是所有的樣式都會被子元素所繼承,比如:背景、邊框、定位相關的樣式都不會被繼承
8.選擇器的優先級
當使用不同的選擇器,選中同一個元素時,并且設定相同的樣式時,這時樣式之間産生了沖突,最終到底采用哪個選擇器定義的樣式,由選擇器的優先級(權重)決定,優先級高的優先顯示
優先級的規則
内聯樣式,優先級1000
id選擇器,優先級100
類和僞類,優先級10
元素選擇器,優先級1
通配*,優先級0
繼承的樣式,沒有優先級
1.當選擇器中包含多種選擇器時,需要将多種選擇器的優先級相加,然後再比較,但是注意,選擇器優先級計算不會超過他的最大的數量級
2.如果選擇器的優先級一樣,則使用靠後的樣式
3.并集選擇器的優先級是單獨計算的div, p, #p1, .hello{}
4.可以在樣式的最後添加一個!important,則此時該樣式将會擷取一個最高的優先級,将會優先于所有的樣式顯示,甚至超過内聯樣式,但是在開發中,盡量避免使用!important
9.a的僞類
涉及到a的僞類一共有四個
:link
:visited
:hover
:active
而這四個選擇器的優先級是一樣的
10.文本标簽
em和strong這兩個标簽都表示一個強調的内容
em主要表示語氣上的強調,在浏覽器中預設使用斜體顯示
strong表示強調的内容,比em更強烈,預設使用粗體顯示
i标簽中的内容會以斜體顯示
b标簽中的内容會以粗體顯示
h5規範中規定:對于不需要着重的内容,而是單純的斜體或者是加粗,就可以使用i和b标簽
small标簽中的内容會比他父元素中的文字要小一些
在H5中使用small标簽來表示一些細則一類的内容
比如:合同中的小字,網站的版權聲明都可以放到small
網頁中所有的加書名号的内容都可以使用cite标簽,表示參考的内容,比如:書名、歌名、話劇名、電影名……
q标簽表示一個短的引用(行内引用),q标簽引用的内容,浏覽器會預設加上引号
blockquote标簽表示一個長引用(塊級引用)
使用sup标簽來設定一個上标
使用sub标簽用來表示一個下标
使用del标簽來表示一個删除的内容,會自動添加删除線
ins表示一個插入的内容,會自動添加下劃線
需要在頁面中直接編寫一些代碼
pre是一個預格式标簽,會将代碼中的格式儲存,不會忽略多個空格及換行
code專門用來表示代碼
我們一般結合使用pre和code來表示一段代碼
11.em 和 i 的差別?
em是語氣強調
i是圖示