類的選擇器(二)

2021-10-23 22:45:18 字數 2710 閱讀 6667

偽元素選擇器

first-letter:選擇文字首字母

first-line:選擇文字的第一行

after:在元素前面新增內容

before:在元素後面新增內容

9.選擇器總結

什麼是選擇器?

選擇器:描述後面的樣式施加到那些目標,或者說根據某個依據來選擇應用的樣式的目標

根據選擇依據不同,就產生了各種不同的選擇器

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」]:選擇了title屬性包含「tt」的元素

5.關係選擇器

根據元素間的家族關係來選擇目標

這些細節記不住沒干係,看一下能認識就行

6.偽元素.偽類選擇器

偽元素:其效果等同於增加乙個元素,所以稱之為偽元素

偽類:其效果等同於增加乙個類,所有稱之為偽類

7.組合選擇器

多個選擇如果想應用同乙個樣式,可以用逗號隔開

4.布局

4.1文件流

所謂文件流就是按照元素的順序從左到右、由上而下的方式排列。

4.2 定位

預設的文件流很多時候不能滿足我們的布局要求,需要更豐富的布局手段,這就需要用到定位了。定位方式有:static、fixed、relative、absolute。

static靜態定位(預設的

無定位,元素正常出現在流(文件流)中

不受left,right,top,bottom的影響

relative 相對定位

absolute絕對定位

為了處理樣式重疊事件,我們需要用到z-index

數值越大,等級越高

定位總結

(1)標準文件流按照從左到右、自上而下的方式依次排列元素。若要改變預設布局方式則需用relative、absolute、fixed等定位方式;

(2)relative是相對於其原有位置進行偏移;

(3)absolute是相對於其父容器進行偏移,注意其父容器必須是有定位的,即非預設(static)定位方式,否則會一直往上追溯,直到頁面;

(4)fixed是相對於整個頁面進行偏移。

(5)relative不會從標準文件流裡脫離,但是absolute和fixed是都會從文件流裡脫離出來

浮動

通過設定float使得元素從原本的文件流脫離出來,感覺浮在原本的文件流上面。

案例:

**實現:

我們做這個案例的時候,會遇到這種情況:

這是因為div5被浮動的div2,div3,div4覆蓋了,但還是可以通過

除錯工具檢視到

那麼怎樣能讓它正常顯示呢

在div4後面加上乙個clear

.clear

標籤選擇器,id選擇器,class類選擇器

1.標籤選擇器的格式 標籤 屬性 值 我是段落 2.id選擇器的格式 id名稱 屬性 值 我是段落 3.class類選擇器的格式 類名 屬性 值 我是段落 1 每乙個標籤都有id和class屬性 但是每乙個標籤只能有乙個id的屬性,但是可以有很多個class屬性。2 id相當於人的身份證,class...

屬性選擇器 偽類選擇器 層級選擇器

漸進增強 作用範圍 從小到大 先保證最基本的功能 使用者體驗提公升 優雅降級 作用範圍 從大到小 先針對版本較高的裝置進行專案構建,保證使用者體驗的完美 犧牲一些效果,保證最基本的功能 選擇器 選擇符 id class 型別 div span 後代選擇器 偽類選擇器 偽元素選擇 屬性選擇器 e at...

css選擇器 偽類選擇器 屬性選擇器

偽類選擇器 nth of type index index 同型別兄弟元素中的排名 屬性選擇器 attr val attr 屬件名稱 val 屬性值 屬性選擇器 href val 表標屬性的結尾 屬性選擇器 class tap 表示屬的開頭 first child選擇第乙個 元素 nth of ty...