您的位置：首页 > Web前端 > CSS

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

2014-01-29 09:22 489 查看
那我们这边来看其中两个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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航