CSS選擇器總結

2021-09-10 17:12:19 字數 1039 閱讀 4928

1,div是乙個標準的塊級元素。乙個塊級元素會新開始一行並且盡可能撐滿容器。

其他的常用塊級元素包括:p,form 和html5中的新元素:header,footer,section等等

span 是乙個標準的行內元素,就像a元素一樣

2,前端工程師主要打交道的是瀏覽器

主要瀏覽器和核心: ie : 核心:trident

firefox:核心gecko

google chrome:核心:webkit/blink

safari: 核心:webkit

opera: 核心:presto

3,非同步的:分開同時載入

同步的:乙個執行完在執行另乙個

4, 選擇器的優先順序

!important > 行間樣式 >id選擇器 >class | 屬性選擇器 > 標籤選擇器 > 萬用字元選擇器

5,css權重

!importan infinity

行間樣式 1000

id 100

class|屬性|偽類 10

標籤|偽元素 1

萬用字元 0

(256進製)

6,複雜選擇器

div span{} //又叫父子選擇器 或者 派生選擇器

div > span {} // 直接子元素選擇器

div.demo{} //並列選擇器

div#demo{} //並列選擇器

a:hover{} //偽類選擇器

偽元素:乙個標籤天生都有兩個偽元素

span::before{}

span::after{};

7:選擇器的先後順序

!important > 行間樣式 > id選擇器 > class 選擇器 == 屬性選擇器 > 標籤選擇器 > 萬用字元

8:css權重

!important infinity

行間樣式 1000

id 100

class|屬性|偽類 10

標籤|偽元素 1

萬用字元 0

直接子元素選擇器 div > em {};

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...

CSS總結 CSS選擇器

css3選擇器最新部分,有人也稱這種選擇器為css3結構類,下面我們通過實際的應用來具體了解他們的使用和區別,首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...

CSS選擇器總結

通用選擇器 選擇所有元素 css2 型別選擇器 element 根據型別選擇元素 css1 類選擇器 class 根據全域性屬性class的值選擇元素 css1 id選擇器 id 根據全域性屬性id的值選擇元素 css1 屬性選擇器 attr 基於屬性選擇元素 css2 attr val 選擇定義a...