偽元素選擇器
:first-letter 選擇文字的首字母
:first-line 選擇文字的首行
:after 在元素前面新增內容
:before 在元素後面新增內容
選擇器總結
什麼是選擇器?
選擇器:描述後面的樣式施加到哪些目標,或者說根據某個依據
來選擇應用的樣式
根據選擇依據的不同,就產生了不同的選擇器
1. 元素選擇器
div2.id選擇器
根據元素的id屬性來選擇
書寫格式是: #idname
#username
3.類選擇器
根據元素的class屬性來選擇
書寫格式是: .classname
.passwd
4.屬性選擇器
根據屬性的特徵來選擇應用樣式的目標,從這個意義上
講,它包含了id選擇器和類選擇器
[title]:選擇設定了title屬性的元素
[title=」tt」]:選擇title屬性等於「tt」的元素
[title^=」tt」]:選擇title屬性以「tt」開頭的元素
[title$=「tt」]:選擇title屬性以「tt」結尾的元素
[title~=」tt」]:選擇title屬性包含完整單詞「tt」的元素
[title*=」tt」]:選擇titlt屬性包含「tt」的元素
5.關係選擇器
根據元素間的家族關係來選擇目標
這些細節我們有可能記不住,沒有關係
忘記的時候看一下
你能夠認識它就行
6.偽元素、偽類選擇器
偽元素:其效果等同於增加乙個元素,所以稱之為偽元素
偽類:其效果等同於增加乙個類,所有稱之為偽類
7.組合選擇器
多個選擇器如果想應用同乙個樣式,可以用逗號隔開
1文件流
所謂文件流就是按照元素的順序從左到右,由上而下的方式排列
2定位
預設的文件流很多時候不能滿足我們的要求,那麼我們就需要更多的、
更豐富的布局手段,這個時候就需要定位了
定位方式有static、fixed、relative、absolute
static靜態定位(預設)
無定位,元素正常出現在流(文件流)中
不受left,right,top,bottom的影響
relative相對定位
absolute絕對定位
fixed固定定位
z-index
為了處理樣式重疊事件,我們需要用到z-index
數值越大,等級越高(999)
(1)標準文件流按照從左到右,由上到下的方式排列元素
如果想要改變預設的布局方式,就需要用到relative,
absolute,fixed等定位方式
(2)relative是相對於原來的位置進行偏移
(3)absolute是相對於它的父容器(上一級)進行偏移
但是它的父容器也必須不是預設定位(static),否則的話
會一直頂到網頁的最頂部
(4)fixed是相對於整個頁面進行偏移
(5)relative不會從標準文件流裡脫離,但是absolute和
fixed是都會從文件流裡脫離出來
浮動
通過設定float使得元素從原本的文件流裡脫離出來
感覺像浮在原本的文件流上面,所以叫它浮動
案例:
**實現:
我們做這個案例的時候,會遇到這種情況:
這是因為div5被浮動的div2,div3,div4覆蓋了,但還是可以通過
除錯工具檢視到
那麼怎樣能讓它正常顯示呢
在div4後面加上乙個clear
.clear
屬性選擇器,偽類選擇器,偽元素選擇器
屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...
CSS之偽類選擇器 偽元素
偽元素a link 未訪問的鏈結 a visited 訪問過的鏈結 a hover 滑鼠移動到鏈結上 a active 按住滑鼠不動的時候 提示 在 css 定義中,a hover 必須被置於 a link 和 a visited 之後,才是有效的。提示 在 css 定義中,a active 必須被...
偽元素和偽元素選擇器
偽元素 after和 before after是乙個css偽元素,使用 after,你可以從css裡往頁面上新增內容 不再要在html裡有相應的東西 雖然最終生成的東西並不是真正的dom裡的內容,但這些內容能像普通內容一樣顯示,基本的效果是這樣的 雙冒號 和單冒號 的區別 所有支援css3的雙冒號 ...