css中如何使用nth-of-type

發(fā)布時間：2022-03-23 13:36:11 來源：億速云閱讀：232 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)css中如何使用nth-of-type，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　如何使用nth-of-type？

　　我們先來看看nth-of-type的具體描述，注意“：”（冒號）在“nth-of-type（2n）”之前附加。

　　li:nth-of-type(2n){

　　}

　?。ǎ﹥?nèi)的“n”表示的是第幾位，“2n”則表示是其是2的倍數(shù)

　　你還可以指定其他的數(shù)，比如“3n+1”、“odd”、“even”等。

　　我們來看一個具體的示例

　　代碼如下

　　HTML代碼

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>CSSnth-of-type</title>

　　<linkrel="stylesheet"type="text/css"href="sample.css">

　　</head>

　　<body>

　　<ul>

　　</ul>

　　</body>

　　</html>

　　CSS代碼

　　sample.css

　　li:nth-of-type(2n){

　　color:#5bc0de;

　　}

　　li{

　　margin:10px;

　　font-size:120%;

　　}

關(guān)于“css中如何使用nth-of-type”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

猜你喜歡