1. 程式人生 > >web前端學習(三)css學習筆記部分(6)-- 選擇器詳解

web前端學習(三)css學習筆記部分(6)-- 選擇器詳解

9、選擇器詳解

9.1  屬性選擇器

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [id*=div]{/*選中id中有div字樣的*/
            color:lime;
        }
        [id^=div]{/*選中id中開頭是div字樣的*/
            color
: #FF0000; } [id$=y]{/*選中id中結尾是div字樣的*/ color: fuchsia; } </style> <!--css樣式表放在前面和後面效果是相同的,只不過在前面的是隻渲染一次的 css放在後面引入的話頁面需要渲染兩次--> </head> <body> <div id="mydiv1">這是一段話測試</div> <div id="div2">這是一段話測試</div> <
div id="div3">這是一段話測試</div> <div id="div4">這是一段話測試</div> <div id="my">這是一段話測試</div> </body> </html>

 

9.2  結構性偽類選擇器

9.3.1  偽類選擇器概述

9.3.2  偽元素選擇器概述

9.3  選擇器root、not、empty、target