二、精靈技術（雪碧技術）
三、css3的選擇器擴充套件
在上篇文章對css盒子模型知識的總結中，對margin屬性有遺漏，此篇將會做以補充，並對精靈技術和選擇器的擴充套件進行總結
情況一：上下疊加情況二：左右疊加
情況三：空元素的margin疊加
補充：前兩種情況是標籤中有內容的情況，**只展示情況一，情況二，三與一相似。
/* fixed的含義就是元素相對瀏覽器的位置是固定不變的。
*/*#p
#p1<
/style>
<
/head>
"p">林志玲<
/p>
"p1"
>楊冪<
/p>
<
/body>
<
/html>
1.定義：頁面中的一些背景圖整合到一張大圖中,然而，各個網頁元素通常只需要精靈圖中不同位置的麼某個小圖，要精確定位到精靈圖中的每個小圖,這樣當使用者訪問該頁面時，只需向伺服器傳送一次請求，網頁中的背景影象即可全部顯示出來。注：此**是精靈技術的2.
優點： 為了有效減少伺服器接受和傳送請求的次數,提高頁面載入速度
核心**，(1)背景圖為精靈圖,(2)背景定位(3)背景圖不重複，其他部分(css樣式)與以前相似。
background-image:
url(img/icon.png)
; background-repeat: no-repeat;
background-position:
-500px -
100px;
名稱示例
萬用字元選擇器
*元素選擇器
body
類選擇器選擇器
.list
id選擇器
#p後代選擇器
.list li
名稱示例
子元素選擇器
#p > .inner只能匹配到直接後代，不能匹配到深層次的後代元素
相鄰兄弟選擇器
#wrap #first + .inner;只會匹配緊跟著的兄弟元素
通用兄弟選擇器
#wrap #first ~ .inner ;它會匹配所有的兄弟元素(不需要緊跟)
選擇器分組
h1,h2,h3;逗號為結合符
#d > div
<
/style>
<
/head>
"d">
"one"
>林志玲<
/div>
"one"
>楊冪<
/div>
<
/p>
"one"
>林心如<
/div>
<
/h1>
<
/div>
<
/body>
注：此**只呈現子元素選擇器的**，如想進行其他選擇器的測驗，只需做出相應的修改。
CSS 選擇器擴充套件
1.選擇器分組 選擇器分組語法 選擇器分組 選擇器1,選擇器2 選擇器分組.html h4h5 h62.屬性選擇器 a.a href 只對有 href 屬性的錨 a 元素 應用樣式 h2h1 b.a title aaa 把包含標題 title 的所有元素變為紅色 谷歌火狐 c.a href titl...
CSS的擴充套件選擇器
基本選擇器有三個，當設定樣式的時候不是很方便。目前有三個擴充套件選擇器 關聯選擇器 組合選擇器 偽元素選擇器。一 關聯選擇器 設定巢狀標籤的樣式。例 關聯選擇器.html 可是大家發開始 卡和手機 這一行的背景是blue。aaaaaaaa 二 組合選擇器 設定巢狀標籤的樣式 例 組合選擇器.html...
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...