HTML學習筆記 CSS學習選擇器 第五節 （原創）
阿新 • • 發佈：2017-09-10
ext spa family 如果 styles ctype css gre utf
<!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>
css文件tzy.css
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學習選擇器 第五節 （原創）