久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

CSS中的偽選擇器詳細介紹

本篇內(nèi)容主要講解“CSS中的偽選擇器詳細介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習“CSS中的偽選擇器詳細介紹”吧!

網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計的開發(fā)，更需要了解用戶，從用戶角度來建設(shè)網(wǎng)站，獲得較好的用戶體驗。創(chuàng)新互聯(lián)公司多年互聯(lián)網(wǎng)經(jīng)驗，見的多，溝通容易、能幫助客戶提出的運營建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)公司，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來訪用戶感受到浩方產(chǎn)品的價值服務(wù)。

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

我們可以在VS里面提前預(yù)覽一下。
CSS中的偽選擇器詳細介紹

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

一  :nth-child 偽選擇器

     我們知道在jquery中有一種選擇器叫做“子類選擇器”，對應(yīng)的有: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>

   

CSS中的偽選擇器詳細介紹

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

選擇器的時候，內(nèi)部應(yīng)該會調(diào)用相應(yīng)的方法來解析到對應(yīng)dom的節(jié)點，首先要明白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>

   
CSS中的偽選擇器詳細介紹

二 :checked，:unchecked,:disabled,:enabled

同樣在jquery中，有一組選擇器叫做“表單對象屬性“，我們可以看看jquery的在線文檔。
CSS中的偽選擇器詳細介紹

同樣我們很開心的發(fā)現(xiàn)，在css中也存在這些屬性。。。是不是開始有點醉了。。。還是先睹為快。

1. disabled,enabled

代碼如下:

<!DOCTYPE html>
<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">
       input[type='text']:enabled {
           border: 1px solid red;
       }</p> <p>            input[type='text']:disabled {
               border: 1px solid blue;
           }
   </style></p> <p></head>
<body>
   <form>
       <input type="text" disabled="disabled" />
       <input type="text"/>
   </form>
</body>
</html>

   
CSS中的偽選擇器詳細介紹

2.  checked,unchecked

代碼如下:

<!DOCTYPE html>
<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">
       form input[type="radio"]:first-child:checked {
           margin-left: 205px;
       }
   </style></p> <p></head>
<body>
   <form>
       <input class="test" type="radio" value="女" /><span>女</span><br/>
       <input class="test" type="radio" value="男" /><span>男</span></p> <p>    </form>
</body>
</html>


CSS中的偽選擇器詳細介紹

3. selected

   這個在css中雖然沒有原裝的，但是可以用option:checked來替代，比如下面這樣。

代碼如下:

<!DOCTYPE html>
<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">
       option:checked {
           color: red;
       }
   </style></p> <p></head>
<body>
   <form>
       <select>
           <option>1</option>
           <option>2</option>
           <option>3</option>
       </select>
   </form>
</body>
</html>


CSS中的偽選擇器詳細介紹

三  empty偽選擇器

    這個選擇器有點意思，在jquery中叫做”內(nèi)容選擇器“，就是用來尋找空元素的，如果玩轉(zhuǎn)jquery的empty，這個也沒有什么問題，

下面舉個例子，讓第一個空p的背景變色。

代碼如下:

<!DOCTYPE html>
<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"></p> <p>        p:first-child{
           width:500px;
           height:20px;
       }</p> <p>        p:empty {
           background:red;
       }
   </style></p> <p></head>
<body>
   <p></p>
   <p>他好</p>
</body>
</html>


CSS中的偽選擇器詳細介紹

四：not(xxx) 偽選擇器

同樣這個也是非常經(jīng)典的not選擇器，在jquery中叫做”基本選擇器“，想起來了沒有？？？

CSS中的偽選擇器詳細介紹
總的來說，當你看完上面這些，是不是覺得css3中已經(jīng)融入了一些”腳本處理行為”，這種感覺就是那個css再也不是你曾今認識的那個css了。

到此，相信大家對“CSS中的偽選擇器詳細介紹”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習！

本文名稱：CSS中的偽選擇器詳細介紹
當前鏈接：http://sd-ha.com/article40/jiigeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、定制網(wǎng)站、面包屑導(dǎo)航、用戶體驗、小程序開發(fā)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化