1、選擇器類型

標簽選擇器，類選擇器，ID選擇器，組合選擇器，偽類和偽元素，屬性選擇器，子選擇器，同胞選擇器， :not()選擇器

?

1、同胞選擇器

相鄰同胞標簽：?

h2 + p{ color:red; }

選擇每個h2標簽后面的直接相鄰的段落

(其中空格可選。（可選，就是可有可無，意思都一樣）)

同胞標簽：

h2 ~ p{ color:red; }

選擇屬于h2同胞標簽的所有p標簽（和h2同一級的所有p）

?（~表示選擇h2的所有同胞標簽。其中空格可選）

?

2、屬性選擇器

img[title] ?如

<a href="#" class="sinaweibo"><img src="images/sina.png"></a>的css可以這樣

a[ href=”#”]{ color:red; }

a[href^=”fttp://”]? ^表示以……開始

a[href$=”.pdf”]? $表示以……結束

?

2、??? 組合選擇器?

（組合選擇了不同類型的選擇器，如下面的組合使用類選擇器和類型選擇器）

.architec .project em{ color:red; }? 表示值選擇在architec 這個類下面的project類中的 em元素

?

3、??? 子選擇器

?? body > h1 將選擇body標簽子標簽里面的所有h1標簽（注意子標簽的定義）

?

（偽類選擇器）

:first-child

:last-child

:nth-child (有著強大的功能)可以將表格隔行設置不同的樣式，可以設置不同列表項目的不同樣式

設置表格行顏色交替

tr: nth-child(odd){ background-color: #993366; }? （偶數行）

tr: nth-child(even){ background-color: #993366; }? （奇數行）

tr: nth-child(3n+2){ background-color: #993366; }? (從第2個元素開始，沒3個元素選擇一次)

?

2、鏈接狀態的順序

鏈接可能出現多種狀態，并且晚出現的會覆蓋前面的規則所以要注意多種狀態出現的順序，按照下面的順序規則：link visited focus hover active? (縮寫為LVFHA)

?

未完成任務：（周四完成，并更新上來）

1、? 盒模型在IE goole等不同瀏覽器的使用和區別

2、? 浮動的用法，原理

?（今天沒完成。在改第一個頁面。2016-01-07）

?

（補 之前沒完成的任務 ?2016-01-17）

?

1 、盒模型在IE 等不同瀏覽器的使用和區別

(圖片傳不上來)

IE和W3C分別有一套盒子模型，Firefox中采用W3C標準模型，而IE中則采用Microsoft自己的標準，W3C標準認為，盒子的寬度僅僅是內容的寬度，而IE標準認為“內容+padding+border”才是盒子的寬度，所以在ie中盒子會比標準的多兩個像素。

?

2、基本的浮動原理

任何元素?element?都可以被浮動。段落、div、list、tables,以及圖像都可以被浮動，事實上即使是像?span?和?strong?這樣的行內置元素也可以很好地進行浮動。
任何申明為?float?的元素自動被設置為一個"塊級元素",?這表示它可以具有申明的"width"和"height"屬性。

浮動"從流程中被移除出來",?但是與絕對位置的元素不同，浮動是在他們前面的最后一個塊元素之后直接被顯示出來（就像盒子一樣）。如果該浮動是在一個“行塊”中，該浮動的上邊界被放置在行塊頂部的水平上。當除此以外，浮動與絕對元素相似，原先的塊盒會完全忽略浮動。那些靜態的塊盒知識保持一個接一個地”跟隨“，就好像沒有浮動不在那里一樣。

轉載于:https://www.cnblogs.com/lal-fighting/p/5107484.html

總結

以上是生活随笔為你收集整理的任务二：1、选择器 2、连接集中状态的顺序 3、浮动的用发和原理 4、盒模型在IE和Google等不同浏览器的区别与联系...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。