詳細介紹CSS中的偽選擇器

2024-07-11 08:30:06

字體：大中小

來源：轉載

供稿：網友

說到偽選擇器，真的讓我體會到了CSS的無比強大，強大到自己貌似都不認識CSS了，有點C# 6.0中一些語法糖帶給我們的震撼。。。首先

我們可以在VS里面提前預覽一下。
2015518155534016.jpg (549×312)

可以看到，上面的偽類有很多很多，多的讓我眼都快瞎了。。。下面就挑一些實用性比較強的說一說。

一 :nth-child 偽選擇器

我們知道在jquery中有一種選擇器叫做“子類選擇器”，對應的有:nth-child，:first-child，:last-child，:only-child，這回在CSS中同樣

可以辦到，可以說一定程度上緩解了jquery的壓力，下面簡單舉個例子。<head>

復制代碼

代碼如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title></p><p> <style type="text/css">
ul li:nth-child(1) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>

可以看到，當我灌的是:nth-child(1)的時候，ul的第一個li的color已經變成red了，如果復雜一點的話，可以將1改成n，瀏覽器在解析css的偽類

選擇器的時候，內部應該會調用相應的方法來解析到對應dom的節點，首先要明白n是從0，步長為1的遞增，這個和jquery的nth-child類似，沒

什么好說的，然后我們嘗試下：first-child 和 last-child。

復制代碼

代碼如下: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title></p><p> <style type="text/css">
ul li:first-child {
color: red;
font-weight:800;
}</p><p> ul li:last-child {
color: blue;
font-weight: 800;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>

上一篇：淺析與CSS3的loading動畫加載相關的transition優化

下一篇：舉例詳解CSS中的選擇器