CSS伪类和伪对象_3c

CSS伪类和伪对象_3c_02

CSS伪类和伪对象_html_03

css编写顺序应为：a:link->a:visited->a:hover->a:active

显示顺序应该是a:link->a:hover->a:active->a:visited

html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>锚伪类用法</title>
  <style type="text/css">
  a{text-decoration:none}
  a:link {color: #FF0000}
  a:hover {color: #FF00FF}
  a:visited {color: #00FF00}
  
  a:active {color: #0000FF}
  </style>

</head>

<body>

<p><b><a href="#" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>

</body>
</html>


CSS伪类和伪对象_3c_04


first-child示例：

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>first-child用法</title>
  <style type="text/css">
  p:first-child {
    color: red;
    } 
  </style>
</head>

<body>
<p>some text</p>
<p>some text</p>
</body>
</html>


效果如下：

CSS伪类和伪对象_html_05

也就是第一个子对象有效

子对象伪类示例：

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>匹配p中第一个i标记</title>
  <style type="text/css">
  p > i:first-child {
    font-weight:bold;
    color:red;
    } 
  </style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html><span style="color:#ff0000;">
</span>

示例3

.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>匹配所有</title>
  <style type="text/css">
  p:first-child i {
    color:blue;
    } 
  </style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>


效果如下：

CSS伪类和伪对象_伪类_06

lang伪类代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>lang伪类用法</title>
<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~";
   color:red;
   }
</style>

</head>

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body>
</html>


效果如下：

CSS伪类和伪对象_html_07

以上伪类中常用到的是锚伪类，其他伪类和方法用作了解。