CSS伪类和伪对象

最新推荐文章于 2021-08-26 18:51:04 发布

yayun0516

最新推荐文章于 2021-08-26 18:51:04 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签：伪类 css html

本文链接：https://blog.csdn.net/yayun0516/article/details/41454977

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>

效果如下：