type選擇器
h9{color:red}
</style>
<h9>this</h9>
class選擇器
<style>
h1.{color:green}/*h1為元素送讲，可用*代替love所有元素,實(shí)質(zhì)為波浪選擇器（有一串字符匹配）*/
.pastoral{color:red}
</style>
<h1>not green</h1>
<h1 class="i love you">very green</h1>
<p class="pastoral">pppp</p>
<style>
*.i{font-style: italic}///星號(hào)代表所有元素利诺，點(diǎn)后代表class的值
*.love{font-size: 99px;}
*.you{color:red;}
</style>
<h1>not green</h1>
<h1 class="i love you">方方正正very green</h1><!--類(lèi)選擇器分別設(shè)置屬性-->
<p class="pastoral">pppp</p>
id選擇器
<head>
<title>match p</title>
<style type="text/css">
p,h1#z98y /*牢記id選擇器用井號(hào)，星號(hào)代表元素当辐，如改成元素黎棠，只能對(duì)應(yīng)特定元素*/
{ /* ----p,h1#z98y----p#z98y-----*#z98y----*/
letter-spacing: 0.3em
}
</style>
</head>
<body>
<p id="z98y">寬了吧</p>
<h1 id="z98y">試試寬不寬</h1>
</body>
偽類(lèi)
<head>
<title>match p</title>
<style type="text/css">
div>p:first-child{color:red;}//------div的直接后代晋渺，第一個(gè)
</style>/*偽類(lèi)*/
</head>
<p>the last p before the note</p>
<div class ="note">
<p>the last p before the note</p>
<p>the last p before the note</p>
<p>the last p before the note</p>
</div>
<title>match p</title>
<style type="text/css">
a:visited{color:green}//--------訪問(wèn)過(guò)的
div>p:first-child{color:green}
</style>
</head>
<a class="external" >external links</a>
<p>the last p before the note</p>
<div class ="note">
<p href="#">the last p before the note</p>
<p>the last p before the note</p>
<p>the last p before the note</p>
</div>
動(dòng)態(tài)偽類(lèi)
<head>
<title>match p</title>
<style type="text/css">
a:link{color:red}/*沒(méi)點(diǎn)過(guò)時(shí)*/
a:visited{color: blue}/*點(diǎn)過(guò)后*/
a:hover{ background: black}/*鼠標(biāo)懸在上面時(shí)*/
a:active{color:lime}/*按下的瞬間*/
</style>
</head>
<a class="external" >external links</a>
<p>the last p before the note</p>
<div class ="note">
<p href="#">the last p before the note</p>
<p>the last p before the note</p>
<p>the last p before the note</p>
</div>
