CSS樣式中前綴點(diǎn)號(hào)“.”代表自定義樣式，那么前綴“#”的代表什么意思？怎么引用這個(gè)前綴“#”的樣式呢？

“.”代表自定義樣式類(lèi)可以重復(fù)使用如class="點(diǎn)后面的名字"；那么前綴“#”的代表使用于給定了id號(hào)的使用的樣式，如div id="wrapper"/div 樣式中的#wrapper是直接匹配。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、虛擬主機(jī)、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、萬(wàn)源網(wǎng)站維護(hù)、網(wǎng)站推廣。

如何處理CSS3屬性前綴

使用過(guò)CSS3屬性的同學(xué)都知道，CSS3屬性都需要帶各瀏覽器的前綴，甚至到現(xiàn)在，依然還有很多屬性需要帶前綴。這是為什么呢？

我的理解是，瀏覽器廠商以前就一直在實(shí)施CSS3，但它還未成為真正的標(biāo)準(zhǔn)。為此，當(dāng)一些CSS3樣式語(yǔ)法還存在波動(dòng)時(shí)，它們提供針對(duì)流星器的前綴?，F(xiàn)在主要流行的瀏覽器內(nèi)核主要有：

Trident內(nèi)核：?主要代表為IE瀏覽器

Gecko內(nèi)核：?主要代表為Firefox

Presto內(nèi)核：?主要代表為Opera

Webkit內(nèi)核：?產(chǎn)要代表為Chrome和Safari

而這些不同內(nèi)核的瀏覽器，CSS3屬性（部分需要添加前綴的屬性）對(duì)應(yīng)需要添加不同的前綴，也將其稱(chēng)之為瀏覽器的私有前綴，添加上私有前綴之后的CSS3屬性可以說(shuō)是對(duì)應(yīng)瀏覽器的私有屬性：

Trident內(nèi)核：?前綴為?-ms

Gecko內(nèi)核：?前綴為?-moz

Presto內(nèi)核：?前綴為?-o

Webkit內(nèi)核：?前綴為?-webkit

來(lái)看一個(gè)簡(jiǎn)單的示例，早期寫(xiě)一個(gè)圓角?border-radius?，需要這樣寫(xiě)：

.box?{

-moz-border-radius:?5px;

-webkit-border-radius:?5px;

-o-border-radius:?5px;

border-radius:?5px;

}

這樣編寫(xiě)代碼，無(wú)形之中給前端人員增加了不少工作量，于是開(kāi)始有人在討論這個(gè)問(wèn)題“如何在編寫(xiě)CSS時(shí)不需要添加瀏覽器的私有前綴，又能讓瀏覽器識(shí)別？”

-prefix-free

為了解決手工書(shū)寫(xiě)前綴的問(wèn)題，最早的一個(gè)解決方案是由?Lea Verou?提供的一個(gè)?-prefix-free腳本。你只需要在你的?.html?文件中插入一個(gè)?prefixfree.js?文件（可以是文檔任何地方），建議把這個(gè)腳本文件放在樣式表之后。

添加這個(gè)腳本之后，使用CSS3的屬性時(shí)，只需書(shū)寫(xiě)標(biāo)準(zhǔn)樣式即可。但是這種做法將所有壓力交給了客戶(hù)端來(lái)處理。如此一來(lái)頁(yè)面解析壓力就大了，性能會(huì)打一定的折扣，并且一旦腳本加載失敗，那么就會(huì)出現(xiàn)瀏覽器無(wú)法正常渲染CSS3的樣式風(fēng)格。

現(xiàn)在很多小伙伴喜歡在互聯(lián)網(wǎng)上找視頻資料學(xué)習(xí)網(wǎng)頁(yè)制作，但是光看視頻你是不可能學(xué)會(huì)網(wǎng)頁(yè)制作的，沒(méi)有人指導(dǎo)你，而且很多視頻已經(jīng)過(guò)時(shí)了?并沒(méi)有什么用!??如果你真的想學(xué)習(xí)網(wǎng)頁(yè)制作這門(mén)技術(shù)，你可以來(lái)這個(gè)群，前面是573，中間是82〇，最后是49〇，?在這里有最新的HTML課程?學(xué)習(xí)?也有很多人指導(dǎo)你?進(jìn)步?不需要你付出什么?只要你有一顆學(xué)習(xí)的心就可以了?不是愿意學(xué)習(xí)或者自認(rèn)不需要學(xué)習(xí)的就不要加了。

prefixfree腳本僅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。

編輯器插件

除了prefixfree腳本之外，很多同學(xué)依賴(lài)于文本編輯器的插件來(lái)處理。這里來(lái)看看Sublime Text編輯器里是如何實(shí)現(xiàn)Autoprefixer功能的。

要在編輯器中安裝?Autoprefixer?插件，首先需要你的環(huán)境中已經(jīng)安裝好了?Node.js?。你可以在命令終端執(zhí)行：

node?-v

來(lái)檢測(cè)是否已安裝，如果沒(méi)有安裝，請(qǐng)先安裝。在這里假設(shè)你已具備N(xiāo)ode.js環(huán)境。

現(xiàn)在開(kāi)啟你的Sublime Text編輯器，你可以同時(shí)按下?command + Shift + p?三個(gè)鍵，選擇"Install Package"。然后搜索?Autoprefixer?。

現(xiàn)在你在你的Sublime Text中使用Autoprefixer功能。假設(shè)你在樣式文件中輸入：

.box?{

transform:?rotate(45deg);

border-radius:?5px;

box-shadow:?1px?1px?0?rgba(0,0,0,.25);

transition:?all?.2s?ease?.1s;

}

這個(gè)時(shí)候你只需要同時(shí)按下?Command + Shift + P?三個(gè)鍵，選擇“Autoprefix CSS”，并且回車(chē)，就能得到下面這樣的代碼：

.box?{

-webkit-transform:?rotate(45deg);

??transform:?rotate(45deg);

border-radius:?5px;

box-shadow:?1px?1px?0?rgba(0,0,0,.25);

transition:?all?.2s?ease?.1s;

}

如下圖所示：

注：不同的配置，執(zhí)行的效果不一樣。詳細(xì)可以點(diǎn)擊?這里?查閱。

預(yù)處理器中的混合宏

隨著CSS預(yù)處理器越來(lái)越普及，部分同學(xué)開(kāi)始采用預(yù)處理器中的混合宏來(lái)處理CSS3前綴的事項(xiàng)。比如說(shuō)?Compass?，里面就是使用Sass的mixin為CSS3需要帶前綴的屬性定制了一些mixin。還有類(lèi)似于Stylus中的?nib?等。預(yù)處理器中的混合宏確實(shí)可以解決很多問(wèn)題，但也產(chǎn)生了新的問(wèn)題，就是它所使用的語(yǔ)法是全新的，如果要使用就必須重新學(xué)習(xí)，另外這類(lèi)工具的演進(jìn)速度通常都會(huì)跟不上瀏覽器的發(fā)展速度，這樣也會(huì)造成其產(chǎn)生的CSS有過(guò)時(shí)的問(wèn)題，有時(shí)候?yàn)榱私鉀Q一些問(wèn)題，還需要自己去寫(xiě)?mixins?。比如：

正如前面所說(shuō)的，如果要跟上瀏覽器的演進(jìn)，就需要不斷的更新你的CSS3 mixins,不然就會(huì)造成你的代碼不是最新的。其中Compass就存在這樣的問(wèn)題：

@import?"compass";

.box?{

@include?border-radius(5px);

}

編譯出來(lái)的CSS：

.box?{

-moz-border-radius:?5px;

-webkit-border-radius:?5px;

border-radius:?5px;

}

而現(xiàn)實(shí)卻不盡人意，因?yàn)榈綄?xiě)這篇文章為止，我們寫(xiě)圓角屬性只需要：

.box?{

border-radius:?5px;

}

各主流瀏覽器就能正常的解析。造成這個(gè)原因的時(shí)，Compass中的CSS3的mixin沒(méi)有跟上步子去更新定義好的mixins

CSS3的屬性為什么要帶前綴？

CSS3的屬性為什么要帶前綴

使用過(guò)CSS3屬性的同學(xué)都知道，CSS3屬性都需要帶各瀏覽器的前綴，甚至到現(xiàn)在，依然還有很多屬性需要帶前綴。這是為什么呢？我的理解是，瀏覽器廠商以前就一直在實(shí)施CSS3，但它還未成為真正的標(biāo)準(zhǔn)。為此，當(dāng)一些CSS3樣式語(yǔ)法還存在波動(dòng)時(shí)，它們提供針對(duì)流星器的前綴。

現(xiàn)在主要流行的瀏覽器內(nèi)核主要有：

Trident內(nèi)核主要代表為IE瀏覽器

Gecko內(nèi)核：主要代表為Firefox

Presto內(nèi)核：主要代表為Opera

Webkit內(nèi)核：產(chǎn)要代表為Chrome和Safari?

而這些不同內(nèi)核的瀏覽器，CSS3屬性（部分需要添加前綴的屬性）對(duì)應(yīng)需要添加不同的前綴，也將其稱(chēng)之為瀏覽器的私有前綴，添加上私有前綴之后的CSS3屬性可以說(shuō)是對(duì)應(yīng)瀏覽器的私有屬性：

Trident內(nèi)核：前綴為-ms

Gecko內(nèi)核：前綴為-moz

Presto內(nèi)核：前綴為-o

Webkit內(nèi)核：前綴為-webkit

-moz代表firefox瀏覽器私有屬性

-ms代表IE瀏覽器私有屬性

-webkit代表chrome、safari私有屬性

來(lái)看一個(gè)簡(jiǎn)單的示例，早期寫(xiě)一個(gè)圓角border-radius，需要這樣寫(xiě)：