CSS入门之其他伪类，first-child,left,right,lang,focus

本文链接：https://blog.csdn.net/kissme_a/article/details/18860223

那我们这边来看其中两个first-child与lang

first-child

1.应用于属性的第一个子对象

p:first-child{color:red}

<html>
<head>
	<title>列表实例</title>
	<style type="text/css">
	p:first-child{font-size:14pt;color:red}
	</style>
</head>
<body>
	<p>i love you</p>
	do you love me?<br>
	<p>maybe ....   yes or no</p>
</body>
</html>

2.应用于属性的子对象的第一个子对象

p > i:first-child{color:red}

<html>
<head>
	<title>列表实例</title>
	<style type="text/css">
	p > i:first-child{font-size:14pt;color:red}
	</style>
</head>
<body>
	<p>i <i>love</i> you <i>?</i></p>
	do you love me?<br>
	<p>maybe <i>....</i>   yes <i>or</i> no</p>
</body>
</html>

3.应用于属性的第一子对象的所有子对象

<html>
<head>
	<title>列表实例</title>
	<style type="text/css">
	p:first-child i{font-size:14pt;color:red}
	</style>
</head>
<body>
	<p>i <i>love</i> you <i>?</i></p>
	do you love me?<br>
	<p>maybe <i>....</i>   yes <i>or</i> no</p>
</body>
</html>

lang

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