css：nth-of-type()選擇器用法

今天做一個頁面，無意中看到這個nth-of-type感覺挺方便的，之前單雙行有的有橫線，有的無橫線一般在html中單獨再寫border-right：none等之類的。現在發現這個好東西趕緊記錄下來。

:nth-of-type(n) 選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素.n 可以是數字、關鍵詞或公式。

.uninstall_form .uninstall_list_checkbox:nth-of-type(odd){border-right:1px solid #e6e6e6}
<form onsubmit="return check()" action="" method="post" name="post_unintall" id="post_unintall">
            <div class="uninstall_list">
                <input type="checkbox" id="uninstall_list1" name="my_check[]" value="1">
                <label class="uninstall_list_checkbox">我想下某個軟件結果下載了安智市場</label>
            </div>
            <div class="uninstall_list">
                <input type="checkbox" id="uninstall_list1" name="my_check[]" value="2">
                <label class="uninstall_list_checkbox">手機出問題，卸載了重裝試試</label>
            </div>
            <div class="uninstall_list">
                <input type="checkbox" id="uninstall_list2" name="my_check[]" value="3">
                <label class="uninstall_list_checkbox">軟件不全，好多軟件找不到</label>
            </div>　　　　　　　　
　　　　　　　　.....
</form>

odd奇數行右面有一條線  even偶數行沒有，還可以用2n+1表示奇數，2n表示偶數，3n+1表示每個三個顯示。

類似的也有

:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型。n 可以是數字、關鍵詞或公式。

有一個css樣式我感覺也很有用  記錄下來

background-clip: border-box|padding-box|content-box;

background-clip 屬性規定背景的繪制區域。

border-box是背景被裁剪到邊框盒。

效果這樣的

padding-box背景被裁剪到內邊距框。

效果這樣的：

content-box是背景被裁剪到內容框。

效果是這樣：