選擇器基本知識

2021-10-11 21:01:06 字數 2939 閱讀 7482

一.****//萬用字元選擇器(也叫子字串選擇器)

所有 ^開頭 結尾包

含∣預設

加−[d

ata−

code

="kk

"][d

ata−

code

結尾 ~包含 |預設加- [data-code^="kk"] [data-code

結尾包含∣默

認加−[

data

−cod

e="k

k"][

data

−cod

e=「kk」]

[data-code=「kk」]

[data-code~=「kk」]

[data-code|=「kk」]

//後代選擇器div p

//子選擇器 div>p

//相鄰選擇器 div+p

//分組選擇器 div,p

e,ediv>span>p>b>i 按tab快速建立結構

div ~p{} 同級間的包含

//偽類選擇器

偽類用來指定選擇器某種特定狀態或者條件,偽類在dom中並不存在,但對使用者是可見的。

//動態偽類,前面要加:

1、hover 滑鼠滑過

2、link 向未訪問過的鏈結新增樣式

3、visited 向訪問過的鏈結新增樣式

4、active 啟用元素新增樣式(例如:按下)

5、focus 向擁有輸入鍵盤焦點的元素新增樣式 solid 實線 border 邊框

//結構性偽類

ul>li:first-child

1、first-child 匹配父類第乙個子元素

2、last-child 匹配父類最後乙個子元素

3、nth-child(n) 匹配父類元素第幾個子元素 odd 2n 匹配奇數 even 2n+1偶數

//語言偽類 1、:lang(值) 向帶有指定lang屬性元素新增樣式

lang=「國際語言縮寫」 代表該標籤內所寫語言。

//偽類元素選擇器

::first-letter 第乙個字

::first-line 第一行

font-size:控制文字大小

p::first-letter

p::first-line

與偽類選擇器的不同點:

偽類選擇器乙個: , 偽元素選擇器兩個 ::

僅限於塊級元素

::before 在之前設定樣式 1、需要配合content使用,content內一定要寫內容,否則不顯示。

::after 在之後設定樣式

::selection 選中時的樣式

div::before

div::selection

//選擇器優先順序

直觀權重:

10000 !importment (寫在後面)

1000 內聯 外聯

100 id選擇器

10 類選擇器 偽類選擇器 屬性選擇器

1 元素偽類選擇器

0 萬用字元選擇器 後代選擇器 兄弟選擇器

div微觀權重:

1,0,0,0,0 !importment (寫在後面)

0,1,0,0,0 內聯 外聯

0,0,1,0,0 id選擇器

0,0,0,1,0 類選擇器 偽類選擇器 屬性選擇器

0,0,0,0,1 元素偽類選擇器

0,0,0,0,0 萬用字元選擇器 後代選擇器 兄弟選擇器

在乙個節點上設定的樣式越多,越受權重影響。

使用原則:

1、使用就近原則

2、繼承樣式的優先級別最低

3、!inportment的樣式優先級別最高,如有衝突則重新計算。

//css單位

尺寸單位:

% 百分比

in(英吋) 1in=96px=2.54cm

cm(厘公尺)

mm(公釐)

pt point 大約七十二分之一英吋

px 畫素

em 瀏覽器預設字型大小 16px 1em=16px 2em=32px

如果當前元素設定字型大小則 em會根據當前元素進行倍數放大

如果沒有在當前元素設定字型大小 則選擇預設瀏覽器字型大小進行放大倍數

rem 根據根(html)元素字型尺寸的倍數

在html上設定字型大小,下面設定rem 會根據根元素大小進行倍數放大

手機端布局方式:

% 百分比布局

em布局

rem布局

flex(主流)布局

視窗相對單位:

vw 代表一屏的寬度

vh 代表一屏的高度

//顏色單位

1、顏色名 直接寫單詞,

2、rgb rgb值 red 紅色通道 green 綠色通道 blue 藍色通道

如rgb(255,255,255) 即白色。

3、rgb rgb百分比值 如rgb(0%,100%,0%) 即綠色 理解為濃度

4、rgba red 紅色通道 green 綠色通道 blue 藍色通道 alpha透明通道(取值範圍0~1)

5、16進製制數 #000000 #ffffff

//背景

background-color 背景顏色

background-image 背景(image在使用時需要新增:url(位址) ,或者寫none不顯示背景圖 )

background-repeat 背景圖平鋪

//背景圖定位

background-position:x y (x減小,向右走,視線向左;y減小,向上走,視線下移)

icon 圖示 雪碧圖/精靈圖 滑動門

為什麼使用雪碧圖? icon-font 阿里巴巴向量圖示庫

1、提高瀏覽器載入速度

2、background:顏色背景 url(位址) no-repeat(是否平鋪) left(位置,left靠左顯示 top向上顯示,center居中顯示) (支援ie)

CSS選擇器及基本知識

引入css樣式的3種方式 1.直接在行內引用 行內樣式法 2.在head內引入內嵌樣式法 3.外部鏈結 引入外部css檔案法 css選擇器 類選擇器 乙個標籤可以擁有多個class名 乙個class名可以被多個標籤使用 id選擇器 id 唯一性,每個標籤只能有乙個id名 標籤之間的id名,不能重複 ...

CSS01 基本知識和語法以及選擇器

層疊樣式表 英文全稱 cascading style sheets 是一種用來表現html 標準通用標記語言的乙個應用 或xml 標準通用標記語言的乙個子集 等檔案樣式的計算機語言。css不僅可以靜態地修飾網頁,還2.可以配合各種指令碼語言動態地對網頁各元素進行格式化。1.屬性的設定 2.注釋 寫法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...