1. 程式人生 > >HTML學習筆記 CSS學習選擇器案例 第五節 (原創) 參考使用表

HTML學習筆記 CSS學習選擇器案例 第五節 (原創) 參考使用表

樣式 back ack aid head 派生選擇器 char logs pan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="tzy.css" type="text/css">
    <style type="text/css">
        [title]{
            /*屬性選擇器*/
            color: brown;
        }
        [title=te]
{ /*屬性選擇器加值選擇器*/ color: cadetblue; } </style> </head> <body> <h1> 應用了樣式表 </h1> <h2>樣式2</h2> <h3>樣式3</h3> <p><strong>這個樣式引用strong派生選擇器</strong></p> <ul> <li> <strong
>這個會被li strong派生選擇器選擇</strong> </li> </ul> <div id="pid"><p>這個會引用ID選擇器</p></div> <p id="ppd">這個會使用id選擇器<a href="http://www.baidu.com">這個會使用派生選擇器</a></p> <p class="pclass">這個會引用類選擇器</p> <p class="pclass">這個會使用類選擇器<a href
="http://www.baidu.com">這個會使用派生選擇器</a></p> <p title="p">屬性選擇器引用 為指明值的可以隨便寫</p> <p title="te">屬性選擇器引用 指明值的如果寫的不一樣就執行沒指明值的選擇器</p> <p title="te1">屬性選擇器引用 指明值的如果寫的不一樣就執行沒指明值的選擇器</p> <p id="p1"> 拯救大兵瑞恩 <span>白蛇傳<span>獨立宣言</span></span> </p> <p>拯救大兵<span>白蛇傳<span>肚子大了</span></span></p> </body> </html>
h2,h1{
    /*選擇器分組*/
    color: blue;
    font-family: 楷體;
    font-size: 50px;
}
body{
    /*沒有定義樣式的就會引用BODY裏的樣式(可以理解為繼承)*/
    color: aqua;
}
li strong{
    /*派生選擇器*/
    color: bisque;
}
strong{
    /*派生選擇器*/
    color: #FF00FF;
}
p span span{
    /*派生選擇器*/
    font-family:"楷體";
}
#p{
    /*id選擇器用#使用*/
    color: aquamarine;
}
#ppd a{
    /*id選擇器和派生選擇器一起使用*/
    color: blueviolet;
}
.pclass{
    /*類選擇器用.使用*/
    color: darkgreen;
}
.pclass a{
    /*類選擇器和派生選擇器一起使用*/
    color: blue;
}

HTML學習筆記 CSS學習選擇器案例 第五節 (原創) 參考使用表