CSS3高級

CSS3高級
Day01
複雜選擇器
內容生成
多列
CSSHack(瀏覽器兼容)

一、兄弟選擇器
匹配指定元素的相鄰兄弟元素
一、相鄰兄弟選擇器
匹配相鄰的元素
匹配當前元素【後面】的【一個】元素，前提二者必須擁有相同父元素
語法：
selctor1+selector2
經過 + 做爲結合符
eg:
div+p{}
注意：只找與當前元素相關的後面一個緊挨着他的兄弟元素，若是符合則匹配，不符合也不會向下查找。
二、通用兄弟選擇器
匹配當前元素【後面】的【全部】【兄弟】元素
語法:
selector1~selector2
div.first span~b.bold_700{

}
使用 ~ 做爲結合符 div ~ p
注意：第二個元素沒必要牢牢跟隨第一個元素的後面
練習1：
一、經過指定元素 修改其相鄰兄弟爲紅色字體
div.s1+p{
color:red;
}
二、經過指定元素 修改其通用兄弟爲#ccc背景
div.s1~p{
background:#ccc;
}
<p>
<div>指定元素
<p>
<p>
二、屬性選擇器
可以將元素附帶的屬性用於選擇器中，對帶有指定屬性的元素設置樣式
語法：
一、[屬性名]
選擇 帶有 指定屬性 的元素
[title] : 匹配包含title屬性的全部元素
二、元素[屬性名]
p[id] : 匹配全部包含id屬性的p元素
div[title] : 匹配全部包含title屬性的div元素
三、元素[屬性1][屬性2]....
匹配即具有屬性1又具有屬性2的元素
div[id][class]
四、元素[屬性=值]
input[type=text]:匹配全部type屬性值爲text的input元素
input[type="text"]
input[type='text']

input[class=border]
input[id="txtName"]
五、元素[屬性~=值]
<div class="content"></div>
<div class="content important"></div>
div[class~=important]
指定屬性中，包含【獨立】【值】單詞的元素
六、元素[屬性^=值]
屬性值以【值】開始的元素
div[class^=c] : class屬性以c開頭的div元素
div[class^=my]: class屬性以my開頭的div元素
七、元素[屬性*=值]:
屬性值中包含【值】的元素
八、元素[屬性$=值]:
屬性值以【值】結尾的元素
三、僞類選擇器
一、目標(target)僞類
用於匹配 當前活動的 錨點元素
語法：:target
二、元素狀態僞類
場合：表單元素居多
:enabled 匹配每一個已啓用的元素
:disabled 匹配每一個被禁用的元素
:checked 匹配每一個已被選中的input元素(單選按鈕、複選框)
三、結構僞類
一、:first-child ,匹配屬於其父元素中的首個子元素(子元素:first-child)
二、:last-child , 匹配屬於其父元素中的最後一個子元素
table tr:first-child{}
table tr:last-child{}
三、:empty , 匹配沒有子元素(包含文本)的元素

<p></p>：能夠匹配出來

如下兩種狀況匹配不出來:
<p>
<a>百度</a>
</p>
<p>百度</p>
四、:only-child ,匹配是其父元素中的惟一子元素

<p>
<a>百度</a>
</p>
a:only-child{}能夠匹配

<p>
<a>百度</a>
<a>谷歌</a>
</p>
a:only-child{}沒法匹配
四、否認僞類
匹配非指定選擇器的每一個元素(即不是指定選擇器的其餘元素)
語法: :not(selector)
input:not([type=text])
tr:not(:first-child):not(:last-child)
四、僞元素選擇器
特色:獲取指定元素中某一部分文本而用的。
一、:first-letter
用於選取指定選擇器（元素）的首字母
二、:first-line
用於選取指定選擇器（元素）的首行文本
三、::selection
匹配被用戶選取的部分
五、內容生成
經過 css 向已有的元素上增長新的文本（圖片）內容
選擇器：
一、:before
向匹配元素以前增長生成的內容
定位到匹配元素開始的位置
二、:after
向匹配元素以後增長生成的內容

eg:
div:before{}
p:after{}
屬性：
一、content
做用：配合 :before , :after僞元素插入生成的內容div:before{
content:"生成的內容:";
}
經常使用取值:
字符串：普通文本
url:圖像
計數器:
六、計數器
經過css 定義一個計數器，在其餘元素中可使用該計數器生成的數字。
屬性：
一、counter-reset
做用：用於定義計數器並設置初始值
若是不設置初始值，那麼默認爲0，若是設置的話能夠爲正、負、0
選擇器{
counter-reset:counter1 10;
}
選擇器{
counter-reset:counter1 10 counter2 20;
}
注意：若是整個頁面的任何一個元素都想使用到計數器的話，最好將其定義在body中。切記將計數器定義在某個元素中(除body外),若是這樣定義，再使用時永遠都是初始值。
body{
counter-reset:c1 10 c2 20;
}
二、counter-increment
做用:設置每次使用計數器時的增量，默認值爲1
屬性值：能夠爲正(遞增)，也能夠爲負(遞減)
注意：哪一個標籤用，在那個標籤中聲明 counter-increment屬性
語法：
counter-increment:計數器名稱 增量值;
div{
counter-increment:c1 10;
}
函數：
counter(counterName) 函數
做用：使用計數器建立出來的數字文本。
counterName：計數器名稱
七、多列
屬性：
一、column-count
元素被分隔的列數 3
二、column-gap
列與列之間的間隔 px
三、column-rule
列規則，列間隔符的寬度、樣式、顏色
column-rule:1px solid red;
瀏覽器兼容問題：
Internet 10 和 Opera 支持多列
Firefox : -moz-
Chrome 和 Safari : -webkit-
div{
column-count:3;
column-gap:50px;
column-rule:2px solid red;

-o-column-count:3;/*Opera*/
-o-column-gap:50px;
-o-column-rule:2px solid red;

-moz-column-count:3; /*火狐中的多列設置*/
-moz-column-gap:50px;
-moz-column-rule:2px solid green;

-webkit-column-count:3;/*Chrome 與 Safari*/
-webkit-column-gap:50px;
-webkit-column-rule:2px solid red;
}
經常使用火狐寫法
-moz-column-count:3;
-moz-column-gap:50px;
分開寫
-moz-column-rule-style:dashed/dotted(點狀)/double(雙線)/solid(實線);
-moz-column-rule-width:thin/medium/thick/length;
-moz-column-rule-color:orange;
總體
-moz-column-rule:2px dashed red;

八、CSS Hack
1.什麼是css Hack?
因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不同，致使在不一樣瀏
覽器的環境中呈現出不一致的頁面展示效果。這時，咱們爲了得到統一的頁面效果，就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式，咱們
把這個針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack!
CSS hack的原理

2.css hack 的原理
因爲不一樣的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不同，以及CSS優先級對瀏覽器展示效果的影響，咱們能夠據此針對不一樣的瀏覽器情景
來應用不一樣的CSS。

3.CSS hack分類

CSS Hack大體有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針
對IE瀏覽器不一樣版本之間的表現差別而引入的。
屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但
firefox前述三個都不能認識。
選擇器前綴法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
IE條件註釋法(即HTML條件註釋Hack)：針對全部IE(注：IE10+已經再也不支持條件註釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->，針對
IE6及如下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。
CSS hack書寫順序，通常是將適用範圍廣、被識別能力強的CSS定義在前面。
三、HTML頭部引用Hack
經過 IE 的條件註釋 來完成的
條件註釋：
與html註釋類似<!-- -->
if條件判斷是否可以解析註釋裏的內容

gt : 選擇條件版本以上的版本(不包含條件版本)
gt ie 7
lt : 選擇條件版本如下的版本(不包含條件版本)
lt ie 8
gte :選擇條件版本以及以上版本
gte ie 7
lte :
! :選擇條件版本意外的全部版本
! ie6

<!--[if 條件]>
知足條件要作的事情
<![endif]-->
一、經過條件註釋聲明，只在IE下生效
<!--[if ie]>
這段文本只在ie中顯示
<![endif]-->
二、只在ie6以上的瀏覽器生效
<!--[if gt IE 6]>

<![endif]-->
三、在IE8上不生效
<!--[if ! IE 8]>

<![endif]-->
IE全部的css hack
因爲全部的IE瀏覽器都可以識別特定的css屬性值後綴\9，所以咱們能夠給css的屬性值添加\9後綴(在結尾的分號以前)，從而作到只有IE瀏覽器可以識別
該屬性，其餘瀏覽器沒法識別從而將其忽略掉。
好比：.css-hack {
color: red\9; /* 全部瀏覽器上顯示爲紅色 */

}

 

IE6：

_selector{property:value;}
selector{property:value;property:value !important;} /* IE6 不支持同一選擇符中的 !important */
IE7：

+selector{property:value;}
IE8：

selector{property:value\0;}
IE6 & IE7：

*selector{property:value;}
IE6 & IE7 & IE8：

測試：
background-color:red; /* All browsers */
background-color:blue !important;
*background-color:black;
+background-color:yellow;
background-color:gray\9;
background-color:purple\0;
background-color:orange\9\0;
_background-color:green;

總結：* 或 # ，IE七、IE11 支持。
\9 ，IE八、IE九、IE11 支持。
\0 ，IE八、IE9 支持。
*、#、\九、\0 這幾個寫法除了IE外其餘瀏覽器均不支持。

 

CSS3高級
Day01
複雜選擇器
內容生成
多列
CSSHack(瀏覽器兼容)

一、兄弟選擇器
匹配指定元素的相鄰兄弟元素
一、相鄰兄弟選擇器
匹配相鄰的元素
匹配當前元素【後面】的【一個】元素，前提二者必須擁有相同父元素
語法：
selctor1+selector2
經過 + 做爲結合符
eg:
div+p{}
注意：只找與當前元素相關的後面一個緊挨着他的兄弟元素，若是符合則匹配，不符合也不會向下查找。
二、通用兄弟選擇器
匹配當前元素【後面】的【全部】【兄弟】元素
語法:
selector1~selector2
div.first span~b.bold_700{

}
使用 ~ 做爲結合符 div ~ p
注意：第二個元素沒必要牢牢跟隨第一個元素的後面
練習1：
一、經過指定元素 修改其相鄰兄弟爲紅色字體
div.s1+p{
color:red;
}
二、經過指定元素 修改其通用兄弟爲#ccc背景
div.s1~p{
background:#ccc;
}
<p>
<div>指定元素
<p>
<p>
二、屬性選擇器
可以將元素附帶的屬性用於選擇器中，對帶有指定屬性的元素設置樣式
語法：
一、[屬性名]
選擇 帶有 指定屬性 的元素
[title] : 匹配包含title屬性的全部元素
二、元素[屬性名]
p[id] : 匹配全部包含id屬性的p元素
div[title] : 匹配全部包含title屬性的div元素
三、元素[屬性1][屬性2]....
匹配即具有屬性1又具有屬性2的元素
div[id][class]
四、元素[屬性=值]
input[type=text]:匹配全部type屬性值爲text的input元素
input[type="text"]
input[type='text']

input[class=border]
input[id="txtName"]
五、元素[屬性~=值]
<div class="content"></div>
<div class="content important"></div>
div[class~=important]
指定屬性中，包含【獨立】【值】單詞的元素
六、元素[屬性^=值]
屬性值以【值】開始的元素
div[class^=c] : class屬性以c開頭的div元素
div[class^=my]: class屬性以my開頭的div元素
七、元素[屬性*=值]:
屬性值中包含【值】的元素
八、元素[屬性$=值]:
屬性值以【值】結尾的元素
三、僞類選擇器
一、目標(target)僞類
用於匹配 當前活動的 錨點元素
語法：:target
二、元素狀態僞類
場合：表單元素居多
:enabled 匹配每一個已啓用的元素
:disabled 匹配每一個被禁用的元素
:checked 匹配每一個已被選中的input元素(單選按鈕、複選框)
三、結構僞類
一、:first-child ,匹配屬於其父元素中的首個子元素(子元素:first-child)
二、:last-child , 匹配屬於其父元素中的最後一個子元素
table tr:first-child{}
table tr:last-child{}
三、:empty , 匹配沒有子元素(包含文本)的元素

<p></p>：能夠匹配出來

如下兩種狀況匹配不出來:
<p>
<a>百度</a>
</p>
<p>百度</p>
四、:only-child ,匹配是其父元素中的惟一子元素

<p>
<a>百度</a>
</p>
a:only-child{}能夠匹配

<p>
<a>百度</a>
<a>谷歌</a>
</p>
a:only-child{}沒法匹配
四、否認僞類
匹配非指定選擇器的每一個元素(即不是指定選擇器的其餘元素)
語法: :not(selector)
input:not([type=text])
tr:not(:first-child):not(:last-child)
四、僞元素選擇器
特色:獲取指定元素中某一部分文本而用的。
一、:first-letter
用於選取指定選擇器（元素）的首字母
二、:first-line
用於選取指定選擇器（元素）的首行文本
三、::selection
匹配被用戶選取的部分
五、內容生成
經過 css 向已有的元素上增長新的文本（圖片）內容
選擇器：
一、:before
向匹配元素以前增長生成的內容
定位到匹配元素開始的位置
二、:after
向匹配元素以後增長生成的內容

eg:
div:before{}
p:after{}
屬性：
一、content
做用：配合 :before , :after僞元素插入生成的內容div:before{
content:"生成的內容:";
}
經常使用取值:
字符串：普通文本
url:圖像
計數器:
六、計數器
經過css 定義一個計數器，在其餘元素中可使用該計數器生成的數字。
屬性：
一、counter-reset
做用：用於定義計數器並設置初始值
若是不設置初始值，那麼默認爲0，若是設置的話能夠爲正、負、0
選擇器{
counter-reset:counter1 10;
}
選擇器{
counter-reset:counter1 10 counter2 20;
}
注意：若是整個頁面的任何一個元素都想使用到計數器的話，最好將其定義在body中。切記將計數器定義在某個元素中(除body外),若是這樣定義，再使用時永遠都是初始值。
body{
counter-reset:c1 10 c2 20;
}
二、counter-increment
做用:設置每次使用計數器時的增量，默認值爲1
屬性值：能夠爲正(遞增)，也能夠爲負(遞減)
注意：哪一個標籤用，在那個標籤中聲明 counter-increment屬性
語法：
counter-increment:計數器名稱 增量值;
div{
counter-increment:c1 10;
}
函數：
counter(counterName) 函數
做用：使用計數器建立出來的數字文本。
counterName：計數器名稱
七、多列
屬性：
一、column-count
元素被分隔的列數 3
二、column-gap
列與列之間的間隔 px
三、column-rule
列規則，列間隔符的寬度、樣式、顏色
column-rule:1px solid red;
瀏覽器兼容問題：
Internet 10 和 Opera 支持多列
Firefox : -moz-
Chrome 和 Safari : -webkit-
div{
column-count:3;
column-gap:50px;
column-rule:2px solid red;

-o-column-count:3;/*Opera*/
-o-column-gap:50px;
-o-column-rule:2px solid red;

-moz-column-count:3; /*火狐中的多列設置*/
-moz-column-gap:50px;
-moz-column-rule:2px solid green;

-webkit-column-count:3;/*Chrome 與 Safari*/
-webkit-column-gap:50px;
-webkit-column-rule:2px solid red;
}
經常使用火狐寫法
-moz-column-count:3;
-moz-column-gap:50px;
分開寫
-moz-column-rule-style:dashed/dotted(點狀)/double(雙線)/solid(實線);
-moz-column-rule-width:thin/medium/thick/length;
-moz-column-rule-color:orange;
總體
-moz-column-rule:2px dashed red;

八、CSS Hack
1.什麼是css Hack?
因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不同，致使在不一樣瀏
覽器的環境中呈現出不一致的頁面展示效果。這時，咱們爲了得到統一的頁面效果，就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式，咱們
把這個針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack!
CSS hack的原理

2.css hack 的原理
因爲不一樣的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不同，以及CSS優先級對瀏覽器展示效果的影響，咱們能夠據此針對不一樣的瀏覽器情景
來應用不一樣的CSS。

3.CSS hack分類

CSS Hack大體有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針
對IE瀏覽器不一樣版本之間的表現差別而引入的。
屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但
firefox前述三個都不能認識。
選擇器前綴法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
IE條件註釋法(即HTML條件註釋Hack)：針對全部IE(注：IE10+已經再也不支持條件註釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->，針對
IE6及如下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。
CSS hack書寫順序，通常是將適用範圍廣、被識別能力強的CSS定義在前面。
三、HTML頭部引用Hack
經過 IE 的條件註釋 來完成的
條件註釋：
與html註釋類似<!-- -->
if條件判斷是否可以解析註釋裏的內容

gt : 選擇條件版本以上的版本(不包含條件版本)
gt ie 7
lt : 選擇條件版本如下的版本(不包含條件版本)
lt ie 8
gte :選擇條件版本以及以上版本
gte ie 7
lte :
! :選擇條件版本意外的全部版本
! ie6

<!--[if 條件]>
知足條件要作的事情
<![endif]-->
一、經過條件註釋聲明，只在IE下生效
<!--[if ie]>
這段文本只在ie中顯示
<![endif]-->
二、只在ie6以上的瀏覽器生效
<!--[if gt IE 6]>

<![endif]-->
三、在IE8上不生效
<!--[if ! IE 8]>

<![endif]-->
IE全部的css hack
因爲全部的IE瀏覽器都可以識別特定的css屬性值後綴\9，所以咱們能夠給css的屬性值添加\9後綴(在結尾的分號以前)，從而作到只有IE瀏覽器可以識別
該屬性，其餘瀏覽器沒法識別從而將其忽略掉。
好比：.css-hack {
color: red\9; /* 全部瀏覽器上顯示爲紅色 */

}

 

IE6：

_selector{property:value;}
selector{property:value;property:value !important;} /* IE6 不支持同一選擇符中的 !important */
IE7：

+selector{property:value;}
IE8：

selector{property:value\0;}
IE6 & IE7：

*selector{property:value;}
IE6 & IE7 & IE8：

測試：
background-color:red; /* All browsers */
background-color:blue !important;
*background-color:black;
+background-color:yellow;
background-color:gray\9;
background-color:purple\0;
background-color:orange\9\0;
_background-color:green;

總結：* 或 # ，IE七、IE11 支持。
\9 ，IE八、IE九、IE11 支持。
\0 ，IE八、IE9 支持。
*、#、\九、\0 這幾個寫法除了IE外其餘瀏覽器均不支持。

 

CSS3高級
Day01
複雜選擇器
內容生成
多列
CSSHack(瀏覽器兼容)

一、兄弟選擇器
匹配指定元素的相鄰兄弟元素
一、相鄰兄弟選擇器
匹配相鄰的元素
匹配當前元素【後面】的【一個】元素，前提二者必須擁有相同父元素
語法：
selctor1+selector2
經過 + 做爲結合符
eg:
div+p{}
注意：只找與當前元素相關的後面一個緊挨着他的兄弟元素，若是符合則匹配，不符合也不會向下查找。
二、通用兄弟選擇器
匹配當前元素【後面】的【全部】【兄弟】元素
語法:
selector1~selector2
div.first span~b.bold_700{

}
使用 ~ 做爲結合符 div ~ p
注意：第二個元素沒必要牢牢跟隨第一個元素的後面
練習1：
一、經過指定元素 修改其相鄰兄弟爲紅色字體
div.s1+p{
color:red;
}
二、經過指定元素 修改其通用兄弟爲#ccc背景
div.s1~p{
background:#ccc;
}
<p>
<div>指定元素
<p>
<p>
二、屬性選擇器
可以將元素附帶的屬性用於選擇器中，對帶有指定屬性的元素設置樣式
語法：
一、[屬性名]
選擇 帶有 指定屬性 的元素
[title] : 匹配包含title屬性的全部元素
二、元素[屬性名]
p[id] : 匹配全部包含id屬性的p元素
div[title] : 匹配全部包含title屬性的div元素
三、元素[屬性1][屬性2]....
匹配即具有屬性1又具有屬性2的元素
div[id][class]
四、元素[屬性=值]
input[type=text]:匹配全部type屬性值爲text的input元素
input[type="text"]
input[type='text']

input[class=border]
input[id="txtName"]
五、元素[屬性~=值]
<div class="content"></div>
<div class="content important"></div>
div[class~=important]
指定屬性中，包含【獨立】【值】單詞的元素
六、元素[屬性^=值]
屬性值以【值】開始的元素
div[class^=c] : class屬性以c開頭的div元素
div[class^=my]: class屬性以my開頭的div元素
七、元素[屬性*=值]:
屬性值中包含【值】的元素
八、元素[屬性$=值]:
屬性值以【值】結尾的元素
三、僞類選擇器
一、目標(target)僞類
用於匹配 當前活動的 錨點元素
語法：:target
二、元素狀態僞類
場合：表單元素居多
:enabled 匹配每一個已啓用的元素
:disabled 匹配每一個被禁用的元素
:checked 匹配每一個已被選中的input元素(單選按鈕、複選框)
三、結構僞類
一、:first-child ,匹配屬於其父元素中的首個子元素(子元素:first-child)
二、:last-child , 匹配屬於其父元素中的最後一個子元素
table tr:first-child{}
table tr:last-child{}
三、:empty , 匹配沒有子元素(包含文本)的元素

<p></p>：能夠匹配出來

如下兩種狀況匹配不出來:
<p>
<a>百度</a>
</p>
<p>百度</p>
四、:only-child ,匹配是其父元素中的惟一子元素

<p>
<a>百度</a>
</p>
a:only-child{}能夠匹配

<p>
<a>百度</a>
<a>谷歌</a>
</p>
a:only-child{}沒法匹配
四、否認僞類
匹配非指定選擇器的每一個元素(即不是指定選擇器的其餘元素)
語法: :not(selector)
input:not([type=text])
tr:not(:first-child):not(:last-child)
四、僞元素選擇器
特色:獲取指定元素中某一部分文本而用的。
一、:first-letter
用於選取指定選擇器（元素）的首字母
二、:first-line
用於選取指定選擇器（元素）的首行文本
三、::selection
匹配被用戶選取的部分
五、內容生成
經過 css 向已有的元素上增長新的文本（圖片）內容
選擇器：
一、:before
向匹配元素以前增長生成的內容
定位到匹配元素開始的位置
二、:after
向匹配元素以後增長生成的內容

eg:
div:before{}
p:after{}
屬性：
一、content
做用：配合 :before , :after僞元素插入生成的內容div:before{
content:"生成的內容:";
}
經常使用取值:
字符串：普通文本
url:圖像
計數器:
六、計數器
經過css 定義一個計數器，在其餘元素中可使用該計數器生成的數字。
屬性：
一、counter-reset
做用：用於定義計數器並設置初始值
若是不設置初始值，那麼默認爲0，若是設置的話能夠爲正、負、0
選擇器{
counter-reset:counter1 10;
}
選擇器{
counter-reset:counter1 10 counter2 20;
}
注意：若是整個頁面的任何一個元素都想使用到計數器的話，最好將其定義在body中。切記將計數器定義在某個元素中(除body外),若是這樣定義，再使用時永遠都是初始值。
body{
counter-reset:c1 10 c2 20;
}
二、counter-increment
做用:設置每次使用計數器時的增量，默認值爲1
屬性值：能夠爲正(遞增)，也能夠爲負(遞減)
注意：哪一個標籤用，在那個標籤中聲明 counter-increment屬性
語法：
counter-increment:計數器名稱 增量值;
div{
counter-increment:c1 10;
}
函數：
counter(counterName) 函數
做用：使用計數器建立出來的數字文本。
counterName：計數器名稱
七、多列
屬性：
一、column-count
元素被分隔的列數 3
二、column-gap
列與列之間的間隔 px
三、column-rule
列規則，列間隔符的寬度、樣式、顏色
column-rule:1px solid red;
瀏覽器兼容問題：
Internet 10 和 Opera 支持多列
Firefox : -moz-
Chrome 和 Safari : -webkit-
div{
column-count:3;
column-gap:50px;
column-rule:2px solid red;

-o-column-count:3;/*Opera*/
-o-column-gap:50px;
-o-column-rule:2px solid red;

-moz-column-count:3; /*火狐中的多列設置*/
-moz-column-gap:50px;
-moz-column-rule:2px solid green;

-webkit-column-count:3;/*Chrome 與 Safari*/
-webkit-column-gap:50px;
-webkit-column-rule:2px solid red;
}
經常使用火狐寫法
-moz-column-count:3;
-moz-column-gap:50px;
分開寫
-moz-column-rule-style:dashed/dotted(點狀)/double(雙線)/solid(實線);
-moz-column-rule-width:thin/medium/thick/length;
-moz-column-rule-color:orange;
總體
-moz-column-rule:2px dashed red;

八、CSS Hack
1.什麼是css Hack?
因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不同，致使在不一樣瀏
覽器的環境中呈現出不一致的頁面展示效果。這時，咱們爲了得到統一的頁面效果，就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式，咱們
把這個針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程，叫作CSS hack!
CSS hack的原理

2.css hack 的原理
因爲不一樣的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不同，以及CSS優先級對瀏覽器展示效果的影響，咱們能夠據此針對不一樣的瀏覽器情景
來應用不一樣的CSS。

3.CSS hack分類

CSS Hack大體有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針
對IE瀏覽器不一樣版本之間的表現差別而引入的。
屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但
firefox前述三個都不能認識。
選擇器前綴法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
IE條件註釋法(即HTML條件註釋Hack)：針對全部IE(注：IE10+已經再也不支持條件註釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->，針對
IE6及如下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不只對CSS生效，對寫在判斷語句裏面的全部代碼都會生效。
CSS hack書寫順序，通常是將適用範圍廣、被識別能力強的CSS定義在前面。
三、HTML頭部引用Hack
經過 IE 的條件註釋 來完成的
條件註釋：
與html註釋類似<!-- -->
if條件判斷是否可以解析註釋裏的內容

gt : 選擇條件版本以上的版本(不包含條件版本)
gt ie 7
lt : 選擇條件版本如下的版本(不包含條件版本)
lt ie 8
gte :選擇條件版本以及以上版本
gte ie 7
lte :
! :選擇條件版本意外的全部版本
! ie6

<!--[if 條件]>
知足條件要作的事情
<![endif]-->
一、經過條件註釋聲明，只在IE下生效
<!--[if ie]>
這段文本只在ie中顯示
<![endif]-->
二、只在ie6以上的瀏覽器生效
<!--[if gt IE 6]>

<![endif]-->
三、在IE8上不生效
<!--[if ! IE 8]>

<![endif]-->
IE全部的css hack
因爲全部的IE瀏覽器都可以識別特定的css屬性值後綴\9，所以咱們能夠給css的屬性值添加\9後綴(在結尾的分號以前)，從而作到只有IE瀏覽器可以識別
該屬性，其餘瀏覽器沒法識別從而將其忽略掉。
好比：.css-hack {
color: red\9; /* 全部瀏覽器上顯示爲紅色 */

}

 

IE6：

_selector{property:value;}
selector{property:value;property:value !important;} /* IE6 不支持同一選擇符中的 !important */
IE7：

+selector{property:value;}
IE8：

selector{property:value\0;}
IE6 & IE7：

*selector{property:value;}
IE6 & IE7 & IE8：

測試：
background-color:red; /* All browsers */
background-color:blue !important;
*background-color:black;
+background-color:yellow;
background-color:gray\9;
background-color:purple\0;
background-color:orange\9\0;
_background-color:green;

總結：* 或 # ，IE七、IE11 支持。 \9 ，IE八、IE九、IE11 支持。 \0 ，IE八、IE9 支持。 *、#、\九、\0 這幾個寫法除了IE外其餘瀏覽器均不支持。