type选择器
h9{color:red}
</style>
<h9>this</h9>
class选择器
<style>
h1.{color:green}/*h1为元素，可用*代替love所有元素,实质为波浪选择器（有一串字符匹配）*/
.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}///星号代表所有元素，点后代表class的值
*.love{font-size: 99px;}
*.you{color:red;}
</style>
<h1>not green</h1>
<h1 class="i love you">方方正正very green</h1><!--类选择器分别设置属性-->
<p class="pastoral">pppp</p>
id选择器
<head>
<title>match p</title>
<style type="text/css">
p,h1#z98y /*牢记id选择器用井号，星号代表元素，如改成元素，只能对应特定元素*/
{ /* ----p,h1#z98y----p#z98y-----*#z98y----*/
letter-spacing: 0.3em
}
</style>
</head>
<body>
<p id="z98y">宽了吧</p>
<h1 id="z98y">试试宽不宽</h1>
</body>
伪类
<head>
<title>match p</title>
<style type="text/css">
div>p:first-child{color:red;}//------div的直接后代，第一个
</style>/*伪类*/
</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}//--------访问过的
div>p:first-child{color:green}
</style>
</head>
<a class="external" href="http://www.baidu.com">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>
动态伪类
<head>
<title>match p</title>
<style type="text/css">
a:link{color:red}/*没点过时*/
a:visited{color: blue}/*点过后*/
a:hover{ background: black}/*鼠标悬在上面时*/
a:active{color:lime}/*按下的瞬间*/
</style>
</head>
<a class="external" href="http://www.baidu.com">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>
网友评论