CSS伪类和伪对象

来源：互联网发布：淘宝怎么买百度云资源编辑：程序博客网时间：2024/06/02 07:29

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>

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>

效果如下：

也就是第一个子对象有效

子对象伪类示例：

.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>

效果如下：

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>

效果如下：

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

0 0