2013年12月27日

CSS - Structural Pseudo-Classes 的nth-of-type和nth-child

好的,這篇是屬於CSS很基本的東西…但小弟前幾天被這個搞了一整天… ( 該重修CSS了..Orz.. ),所以為了讓自己更加有印象,就寫一下這篇文章嚕…至於CSS的高手們,就不要校小弟啦XDDD

nth-of-type和nth-child是屬於CSS Structural Pseudo Classes的其中幾個,而前幾天才發現,小弟自己的觀念錯誤QQ…直到後來,才深深領悟…是怎樣的範例呢…我們先來看一下範例。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .aa:nth-of-type(2) { color: red; }
        </style>
    </head>
    <body>
    <section>
        <div>123</div>
        <div class="aa">我是第1個p標籤</div>
        <div class="aa">我是第2個p標籤</div>  <!-- 希望這個變紅 -->
    </section>        
    </body>
</html>

是的,就是這種簡單的範例,我們利用nth-of-type來選擇要變紅色的區段,而小弟一直預期,應該是第二個標籤會變成紅色… ( 我的觀念錯得離譜,對不起大家QQ )

但結果卻是… ( 喔,至於為什麼div裡面寫著我是p標籤…那是因為我忘記把p標籤這三個字改成我是"我是div標籤"…

image

Orz…竟然是第一個變紅色….好吧,看到這邊,想笑我的人就笑吧XDDDD,我就真的搞錯觀念了嘛…我們先來看看w3cschool的敘述

The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent.

n can be a number, a keyword, or a formula.

Tip: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.

嗯…小弟一直以為,因為小弟是使用class ( .aa:nth-of-type )來當篩選,所以應該會是去尋找所有的.aa,但實際上,不是這樣啊….

那實際上到底應該是怎樣呢??實際上.aa:nth-of-type的意思是指,找出有.aa這個class的元素(也就是div),然後這個div的父原素(也就是body),底下的第幾個div..

所以以上面的案例來說,第二個div是就是"我是第一個p標籤"阿!!~…..

所以,.aa:nth-of-type如字面所說,適用type去尋找…而這個type就是div…

那nth-child呢??…如果我們把上面的範例改成nth-child(2),如下Code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .aa:nth-child(2) { color: red; }
        </style>
    </head>
    <body>
    <section>
        <div>123</div>
        <div class="aa">我是第1個p標籤</div>
        <div class="aa">我是第2個p標籤</div>  <!-- 希望這個變紅 -->
    </section>        
    </body>
</html>

那基本上還是和上面得到的結果是一樣的…那.aa:nth-child是甚麼意思呢?..簡單的說,就是找到.aa這個class後( div ),上面那層父元素( body ),底下的第二個div元素…

所以,結果還是"我是第1個p標籤"會變成紅色…

基本上就是這樣了QQ….所以,我的CSS應該要重修了QQ…

參考資料

2013年12月18日

Windows Azure - 使用Web Deploy和Visual Studio Online CI佈署到Web Site連線字串的關係

最近有空的時候,剛好在追一個小小的問題 ( 其實也不小,搞了好幾天釐清… ),這個問題主要是當使用Visual Studio Online搭配CI並使用從Web Site下載下來的Deploy檔案時,佈署到Web Site時,到底會使用哪個連線字串的實驗…

原本使用CI、或是Deploy的時候是很單純的,但是兩個混再一起,就有一點點小麻煩了,所以既然實驗了,那就在這邊把紀錄記一下嚕…

首先最單純的,如果使用Web Deploy,那我們可以從這邊去指定資料庫的連線字串變更,那這樣就算Web.config裡面的debug或是release沒寫甚麼,最後還是會改成如下圖的字串。

image

所以佈署上去後,字串的確會變成如Web Deploy所設定的…

image

那如果加上CI,並且在Web.config的debug和release加上連線字串的變更,會變成怎樣呢??

首先,我們先來看看Web.Debug.config

<connectionStrings>
<add name="ShihChanDBContext"
  connectionString="Data Source=tcp:web.debug.database.windows.net,1433;"
  xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
</connectionStrings>

然後是Web.Release.config

<connectionStrings>
<add name="ShihChanDBContext"
  connectionString="Data Source=tcp:web.release.database.windows.net,1433;"
  xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
</connectionStrings>

當然,如果直接透過CI做佈署,沒透過Web Deploy當然沒甚麼問題,但我們這邊要對CI做設定,讓他使用Web Deploy。

image

等待佈署完後,我們再重新檢查佈署出去的Web.config。

image

是的,也還是l0這組,所以從這邊可以得知,我們改的Web.debug.config和Web.Release.config被覆蓋掉了。

那真的被覆蓋掉了嗎??..我們現在針對Web.config重新拉一個connection string。

<add name="ShihChanDBContext" connectionString="Data Source=(localdb)\v11.0;Initial Catalog=ShihChanDB;Integrated Security=True;MultipleActiveResultSets=True" providerName="System.Data.SqlClient" />
<add name="ShihChanDBContext2" connectionString="Data Source=(localdb)\v11.0;Initial Catalog=ShihChanDB;Integrated Security=True;MultipleActiveResultSets=True" providerName="System.Data.SqlClient" />

然後Web.Debug.config為

<connectionStrings>
<add name="ShihChanDBContext2"
  connectionString="Data Source=tcp:web.debug.database.windows.net,1433;"
  xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
</connectionStrings>

Web.Release.config為

<connectionStrings>
<add name="ShihChanDBContext2"
  connectionString="Data Source=tcp:web.release.database.windows.net,1433;"
  xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
</connectionStrings>

我們來看看最後產出的結果是…嗯…圖有點小…但基本上,第一組Connection String是Web Deploy所設定的,而第二組的Connection String則是從Web.Debug.config來的;所以我們可以確定Web Deploy的設定會蓋掉Web.config的設定。

image

嗯,等等,眼尖的你發現了嗎??..他替換的是Web.Debug.config而不是Web.Release.config,但我們第一張圖所設定的組態是Release阿!!!!?

image

是的,這是第二個坑…雖然Web Deploy設定的是Release,但實際上CI不會吃到這個設定,而是會依據CI上的設定;CI上預設是空的,所以預設是使用Debug模式…

image

其實我們也可以從佈署成功的畫面看到

image

那如果要改成Release呢??就只能從CI那邊下手了。

image

發行後,我們就可以看到已經正確的替換成Release了…

image

大致上就這樣,所以設定的時候要小心啊QQ…

2013年12月13日

Windows Azure - 與Visual Studio Online連線時,找不到AzureContinuousDeployment.11.xaml檔案

這個問題很簡單,但因為要去VS的建構裡面新增,我怕我未來還是忘記,所以稍微紀錄一下。

這個問題的發生,就是因為小弟手殘,把在版本控制上的AzureContinuousDeployment.11.xaml檔案給刪除了…

所以當使用Web Site要和Visual Studio Online連線的時候,就會出現以下問題。

image

錯誤訊息如下:

Unable to find AzureContinuousDeployment.11.xaml in ShihChan see http://go.microsoft.com/fwlink/?LinkId=254710

當然,如錯誤訊息的內容,我們可以到官方網址看到解說,但基本上還是少了一些步驟…所以在這邊補齊。

首先,我們先到http://go.microsoft.com/fwlink/?LinkId=254710來下載AzureContinuousDeployment.11.xaml,當然,如果想使用版本控制來還原,也是ok啦…

下載下來後,要把AzureContinuousDeployment.11.xaml放到版控的BuildProcessTemplates目錄下,簡單的說,就是要把這個檔案簽入進去啦!!~

接下來,我們假裝要新建一個組件定義,如下圖,但其實不用真的新增組件定義,我們只是要利用這個介面來新增建置流程檔;我們只需要在下圖紅色框框的地方按下新增來建置流程檔。

image

接下來,選擇想要的專案,然後選擇剛剛下載下來的AzureContinuousDeployment.11.xaml檔案。( 別忘記,要把AzureContinuousDeployment.11.xaml放到版控上的BuildProcessTemplates目錄下 )

image

這樣就完成了。

後記

以後不要再手殘了阿QQ..

參考資料