css中的伪类

 1 <style type="text/css">
 2 /*anchor伪类的顺序是固定的，不变的*/
 3 /*未访问时的样式*/
 4     a:link{color: black;}
 5 /*访问过后的样式*/
 6     a:visited{color: pink;}
 7 /*鼠标划过时的样式*/
 8     a:hover{color:blue;}
 9 /*点击时的样式*/
10     a:active{color: red;}
11 </style>
12 
13 </style>
14 </head>
15 <a href="#">这是一个链接</a>
16 </body>

 1 <style type="text/css">
 2 /*css伪类就是在选择器部分增加类选项*/
 3 /*未访问时的样式*/
 4     a.css:link{color: black;}
 5 /*访问过后的样式*/
 6     a.css:visited{color: pink;}
 7 /*鼠标划过时的样式*/
 8     a.css:hover{color:blue;}
 9 /*点击时的样式*/
10     a.css:active{color: red;}
11 </style>
12 
13 </style>
14 </head>
15 <a href="#">这是一个链接，但是不会有样式</a>
16 <a href="#" class="css">这是一个链接，会有样式</a>
17 </body>

 1 <style type="text/css">
 2 p:first-child{
 3     color: blue;
 4 }
 5 </style>
 6 
 7 </style>
 8 </head>
 9 <div><p>这是第一次出现的p标签,有样式</p></div>
10 <p>这是第二次出现的p标签，无样式</p>
11 
12 </body>

 1 <style type="text/css">
 2 p>i:first-child{
 3     color:blue;
 4 }
 5 </style>
 6 
 7 </style>
 8 </head>
 9 <p>这是<i> 第一次 </i>第一次有样式</p>
10 <p>这是<i> 第二次 </i>第二次有样式</p>
11 
12 </body>

 1 <style type="text/css">
 2 p:first-child i{
 3     color:blue;
 4 }
 5 </style>
 6 
 7 </style>
 8 </head>
 9 <p><i>有样式</i><i>有样式</i></p>
10 <p><i>无样式</i><i>无样式</i></p>
11 
12 </body>

 1 <style type="text/css">
 2 q:lang(no){
 3     quotes: "/" "/";
 4 }
 5 
 6 p:lang(it){
 7     background-color: yellow;
 8 }
 9 </style>
10 
11 </style>
12 </head>
13 <p>你可以定义<q lang="no">自己</q>的语言</p>
14 <p lang="it">你可以定义自己的语言</p>
15 
16 </body>