2.5 (案例)CSS3選擇器--結(jié)構(gòu)性偽類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3選擇器--結(jié)構(gòu)性偽類選擇器</title>
</head>
<body>
    <p>
        你好
    </p>
    <div>
        hello前端教育
    </div>
    <h1>
        人間有味是清歡寂寒，瑟動青春里一抹韻色，永遠定格的守望盡情地享受獨處漫時光，初秋閑筆,如歌行板,桂花香海上生明月，天涯共此時蒹葭青衣，刀馬花旦你是我心中，永遠的少年淺秋薄念，獨自涼清秋，綻放成一樹靜美九月，活出月亮般寧靜當愛已成往事種一朵溫暖，在流年時光可知，秋已涼你是我眉心的一記暖痕念起，便是這個季節(jié)最濃的色彩傾心四季，繡光陰咦?。。?    </h1>

    <b> </b>
    <i></i>
    <style>
        /*before 偽元素用于在某個元素之前插入一些內(nèi)容*/
/*      p:before{
            content:"前端HTML5_1606班";
        }*/
        p:after{
            content:'前端1601';
        }
        /*after 偽元素用于在某個元素之后插入一些內(nèi)容*/
        div:after{
            content: "前端HTML5_1606班";
        }
        /*first-line 為某個元素中的第一行文字使用樣式*/
        h1:first-line{
            color:red;
            background-color: yellow;
        }
        /*first-letter 用于為某個元素中的文字首字母(歐美文字)或者第一個字(中文、日文、韓文等漢子)使用樣式*/
        h1:first-letter{
            font-size: 90px;
        }


        /*root 根節(jié)點 root == html*/
        :root{

            background:rgb(246, 200, 246);
            /*換皮膚*/
            /*background: orange;*/
        }
        /*not 反選（讓選中的東西不執(zhí)行以下的代碼）*/
        /*如果不寫body 則把body也算在里面了*/
        body :not(h1){
            background-color: pink;
        }
        /*empty 選擇元素為空(連空格都不能有)*/
        :empty{
            display: block;
            width:100px;
            height:30px;
            background-color: red;
            margin-top: 20px;
        }
        
        /*target 使用target選擇器對頁面中某個target元素樣式（該元素的ID被當做頁面中的超鏈接來使用）
            該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉(zhuǎn)到target元素后起作用
         */
        :target{
            background:greenyellow;
        }
/*      h1::selection{
            
        }*/
        h1::selection{
            background:darkolivegreen;
            color:#fff;
        }
        h1::-moz-selection{
            background:darkolivegreen;
            color:#fff;
        }
        ul{
            list-style: none;
        }
        ul li:before{
            content:counter(c);
        }
        ul li{
            counter-increment: c;
            /*margin-left: 4px;*/
        }
    </style>


    <p id="menu">
        <a href="#text1">IHELLO</a>
        <a href="#text2">IHELLO</a>
        <a href="#text3">IHELLO</a>
        <a href="#text4">IHELLO</a>
    </p>

    <div id="content">
        <div id="text1">hello前端教育</div>
        <div id="text2">hello前端教育</div>
        <div id="text3">hello前端教育</div>
        <div id="text4">hello前端教育</div>
    </div>

    <ul>
        <li>第一個</li>
        <li>第二個</li>
        <li>第三個</li>
        <li>第四個</li>
    </ul>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容