CSS樣式表及選擇器相關內容(二)-僞類與僞元素選擇器

時間 2019-12-05

標籤 css 樣式選擇器相關內容元素欄目 CSS 简体版

原文原文鏈接

僞類與僞元素選擇器概括:

一.僞類選擇器(僞類以":"開頭，用在選擇器後，用於指明元素在某種特殊的狀態下才能被選中)
1.a標籤僞類選擇器，其餘標籤相似
eg: css

<style type="text/css">
              /*設置a標籤未訪問樣式*/
                a:link{
                    /*coral:珊瑚色*/
                    color: coral;
                }
                /*設置標籤訪問後樣式*/
                a:visited{
                    color:red;
                }
                /*設置鼠標懸停a標籤時的樣式*/
                a:hover{
                    /*cyan:青色*/
                    color: cyan;
                    /*設置鼠標在a標籤上顯示爲手指樣式*/
                    cursor:pointer;
                }
                /*設置a標籤點擊後的樣式*/
                a:active{
                    color: #ccc;
                }
</style>

View Code

   2.表示子元素的僞類選擇器:(n也能夠爲:odd【奇數】、even【偶數】)
       :first-child 選中的全部子元素中的第一個孩子
       :last-child 選中的全部子元素中的最後一個孩子
       :nth-child(n) 選中全部子元素的第n個孩子
       :nth-last-child(n) 選中全部子元素的倒數第n個孩子
       :first-of-type    選中全部子元素中每種類型中的第一個孩子
       :last-of-type    選中全部子元素中每種類型中的最後一個孩子
       :nth-of-type(n) 選中全部子元素中每種類型中的第n個孩子
       :nth-last-of-type(n)    選中全部子元素中每種類型中的倒數第n個孩子

       :only-child 獲取獨生子元素，即選中元素中只含有他一個孩子

   3.僞類選擇器-form表單:(:前面填寫需選中元素對應的選擇器)
       :focus     聚焦狀態時使用的樣式
       :disabled 標籤禁用時使用的樣式
       :enabled   標籤可用時使用的樣式
       :default   標籤默認選中時使用的樣式
       :checked   用戶選中時使用的樣式
       :valid     經過驗證後使用的樣式
       :invalid   不經過驗證使用的樣式
       :required 選中必填項時使用的樣式
       :optional 選填項使用的樣式
       :in-range 在範圍內使用的樣式
       :out-of-range 在範圍外使用的樣式


二.僞元素選擇器(僞元素以"::"開頭，用在選擇器後，用於選擇指定的元素。)
eg:ide

<style type="text/css">
        /*在指定元素以前添加內容*/
        section p::before{
            /*content屬性值爲要添加的內容*/
            content: '*';
            color: red;
        }

        /*在指定元素以後添加內容*/
        section p::after{
            /*content屬性值爲要添加的內容*/
            content: '*';
            color: red;
        }

        /*選中第一個字符*/
        section::first-letter{
            color: red;
            font-size: 30px;
        }
        /*選中第一行文字*/
        section::first-line{
            color: blue;
        }
        /*用戶選中文本設置(只有自身內部文本有該樣式效果，裏面包含的元素內容不含有，即p標籤不會有該樣式效果)*/
        section::selection{
            background-color: teal;
            color: yellow;
        }
</style>
    <!-- body中內容 -->
<body>
    <article>
            <section>
                我是section第一段文字<br />
                我是section第二段文字
                <span>span</span>
                <p>第一段話</p>
                <p>第二段話</p>
                <p>第三段話</p>
                <p>第四段話</p>
            </section>
        </article>
</body>