day04權重計算以及css基礎屬性

day04

前一天學習了基礎與部分複雜選擇器以及優先順序，而選擇器設計到權重計算問題。

選擇器權重

！important

infinity

行間樣式

1000

id100

class\屬性\偽類

10標籤\偽元素

1萬用字元

0當css涉及到父子、並列等複雜選擇器時，需比較 權重大小，權重大的覆蓋小的，權重相同時，後面覆蓋前面。

偽類選擇器

html

www.taobao.com

a:hover

feature：內容決定元素所佔位置，不可以通過css改變寬高

span strong em a del

2、塊級元素 block

feature：獨佔一行，可以通過css改變寬高

div p ul li ol form address

3、行級塊元素 inline-block

feature：內容決定大小 可以改變寬高

img src=""

二、元素可以改屬性

例如：

span

三、css可以修改標籤樣式

ema可去掉標籤自帶的樣式。如去除ul的圓點、em的斜體效果以及a標籤的下劃線。

四、開發小經驗

1、凡是帶inline的元素，都有文字特性，有間距。

如img，css寫好需要打包壓縮，如果用margin嵌入方法處理，會造成效果達不到要求。img標籤之間應該不留空隙。

css

.green

.red
.gray
.size1
.size2
.size3

123456

2018.8.17

CSS選擇器權重計算

css各種選擇器的權重 1.id選擇器 100 2.類 屬性 偽類選擇器 10 3.元素 偽元素選擇器 1 4.其他選擇器 0 如果有兩個css樣式都作用於某元素，如 id link a href id 100 link 10 a 1 href 0 111 id link.active id 100...

CSS 選擇器權重計算規則

下面從網易 規範中摘抄的內容，學習他們確定選擇器等級的方式。最近看了 精通css 這部分內容應該是從2.3節摘抄來的。選擇器等級 a 行內樣式style。b id選擇器的數量。c 類 偽類和屬性選擇器的數量。d 型別選擇器和偽元素選擇器的數量。選擇器等級 a,b,c,d style 1,0,0,0 ...

css選擇器的權重計算

其實，css有自己的優先順序計算公式，而不僅僅是行間 內部 外部樣式 id class 元素。一 樣式型別 1 行間 2 內聯 3 外部 二 選擇器型別 1 id id 2 class class 3 標籤 p 4 通用 5 屬性 type text 6 偽類 hover 7 偽元素 first l...