溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css3中偽元素和偽類選擇器的詳細介紹

發(fā)布時間：2021-08-10 18:36:28 來源：億速云 閱讀：150 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“css3中偽元素和偽類選擇器的詳細介紹”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css3中偽元素和偽類選擇器的詳細介紹”吧！

偽類選擇器：CSS中已經(jīng)定義好的選擇器,不能隨便取名

常用的偽類選擇器是使用在a元素上的幾種，`如a:link|a:visited|a:hover|a:active`

 提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

偽元素選擇器：并不是針對真正的元素使用的選擇器，而是針對CSS中已經(jīng)定義好的偽元素使用的選擇器。

CSS中有如下四種偽元素選擇器：
· first-line:為某個元素的第一行文字使用樣式；
· first-letter:為某個元素中的文字的首字母或第一個字使用樣式；
· before:在某個元素之前插入一些內(nèi)容；
· after: 在某個元素之后插入一些內(nèi)容；
   使用方法：選擇器：偽元素{樣式}

 結(jié)構(gòu)性偽類選擇器
 1.  四個最基本的：root、not、empty、target   

 2. first-child、last-child、nth-child、nth-last-child、              
nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)

 3.  nth-of-type、nth-last-of-type   
 4. 循環(huán)使用樣式 
 5. only-child

:root()選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>?！?root”選擇器等同于<html>元素

:not()選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。

:empty()選擇器表示的就是空。用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點內(nèi)容都沒有，哪怕是一個空格。

:target()選擇器來對頁面某個target元素(該元素的id被當做頁面中的超鏈接來使用)指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉(zhuǎn)到target元素后起作用

“:first-child()”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是后代元素。

:nth-child()選擇某個元素的一個或多個特定的子元素；
:nth-last-child()從某父元素的最后一個子元素開始計算，來選擇特定的元素。

看下面一個例子：

代碼如下:


   <style type="text/css">
       div p:nth-last-child(2){
           color:red;
       }
   </style>
</head>
<body>
   <div>
       <p>前端</p>
       <p>開發(fā)</p>
       <p>工程</p>
       <p>軟件</p>
       <p>工程</p>
   </div>
</body>

:nth-child()可以選擇某個的一個或多個特定的子元素，你可以按這種方式進行選擇：
        :nth-child(length);/*參數(shù)是具體數(shù)字*/
        :nth-child(n);/*參數(shù)是n,n從0開始計算*/
        :nth-child(n*length)/*n的倍數(shù)選擇，n從0開始算*/
        :nth-child(n+length);/*選擇大于length后面的元素*/
        :nth-child(-n+length)/*選擇小于length前面的元素*/
        :nth-child(n*length+1);/*表示隔幾選一*/
        //上面length為整數(shù)

 值得注意的是：nth-child(0)沒有選擇元素，nth-child(1)選擇第一個元素。

代碼如下:


   <style type="text/css">
           *{list-style:none;};
           .demo {
               width: 400px;
               padding: 10px;          
           }
           .demo li {
               padding: 5px;
               float: left;
               margin-right:4px;
           }
           .demo li a {
               float: left;
               display: block;
               height: 20px;
               line-height: 20px;
               width: 20px;
               -moz-border-radius: 10px;
               -webkit-border-radius: 10px;
               border-radius: 10px;
               text-align: center;
               background: #f36;
               color: white;
               text-decoration: none;
           }
           .demo li:nth-child(1){
               background:#01FEFE;
           }
           .demo li:nth-child(2n){
               background:#4679BD;
           }</p> <p>    </style>
</head>
<body>
<div class="demo">
 <ul>
   <li class="one" id="first"><a href="">1</a></li>
   <li class="two"><a href="">2</a></li>
   <li class="three"><a href="">3</a></li>
   <li class="four"><a href="">4</a></li>
   <li class="five"><a href="">5</a></li>
   <li class="six"><a href="">6</a></li>
   <li class="seven"><a href="">7</a></li>
   <li class="eight"><a href="">8</a></li>
   <li class="nine"><a href="">9</a></li>
   <li class="ten" id="last"><a href="">10</a></li>
</ul>
</div>

“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計算父元素中指定的某種類型的子元素。當某個元素中的子元素不單單是同一種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常方便和有用的。

":only-child"表示的是一個元素是它的父元素的唯一一個子元素。

偽元素：
 CSS中的偽元素大家以前看過：:first-line,:first-letter,:before,:after;
 那么在CSS3中，他對偽元素進行了一定的調(diào)整，在以前的基礎(chǔ)上增加了一個“：”也就是現(xiàn)在變成了“::first-letter,::first-line,::before,::after”另外他還增加了一個“::selection”,兩個“：：”和一個“：”css3中主要用來區(qū)分偽類和偽元素，到目前來說，這兩種方式都是被接受的，也就是說不管使用哪種寫法所起的作用都是一樣的，只是一個書寫格式不同而以。

::first-line選擇元素的第一行，比如說改變每個段落的第一行文本的樣式，我們就可以使用這個
p::first-line {font-weight:bold;}

::before和::after這兩個主要用來給元素的前面或后面插入內(nèi)容，這兩個常用"content"配合使用，見過最多的就是清除浮動，

代碼如下:


    .clearfix:before,
           .clearfix:after {
                content: ".";
                display: block;
                height: 0;
                visibility: hidden;
             }
            .clearfix:after {clear: both;}
            .clearfix {zoom: 1;}

::selection用來改變?yōu)g覽網(wǎng)頁選中文的默認效果

感謝各位的閱讀，以上就是“css3中偽元素和偽類選擇器的詳細介紹”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對css3中偽元素和偽類選擇器的詳細介紹這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手