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

css2.09_其他选择器的补充

2016-10-17 12:09 435 查看

儿子选择器>：

div>p{
color: red;
}

IE6不兼容、IE7开始兼容，>符号就是儿子选择器
我们先看看后代选择器的示例（引出儿子选择器）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div p{
color: red;
}
</style>
</head>
<body>
<div>
<p>我是段落1</p>
<p>我是段落2</p>
<ul>
<li>
<p>我是段落3</p>
</li>
</ul>
</div>
</body>
</html>运行结果：



我们通过上面代码可以看出，所有的p都是div的后代，所以运行的结果发现所有p都变红色了，接下来我们在看看要讲的儿子选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div>p{
color: red;
}
</style>
</head>
<body>
<div>
<p>我是段落1</p>
<p>我是段落2</p>
<ul>
<li>
<p>我是段落3</p>
</li>
</ul>
</div>
</body>
</html>运行的结果：



我们看出只有段落1与段落2变红，原因是段落1与段落2才是div的儿子，而段落3只是div的后代，不是div的儿子，所以没有变红

序选择器：

:冒号表示序选择器
div p:first-child{
color: red;
}


接下来我们看看示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div p:first-child{
color: red;
}
</style>
</head>
<body>
<div>
<p>我是段落1</p>
<p>我是段落2</p>
<ul>
<li>
<p>我是段落3</p>
</li>
</ul>
</div>
</body>
</html>
运行结果：



原因：段落1是div的第一个孩子，所以变红。段落3是div后代中li标签的第一个孩子，所以段落3也变成了红

注意：

除了:first-child还有：:first-letter最后一个孩子

下一个兄弟选择器+

+表示下一个兄弟选择器
h2+p{
color: red;
}
我们来看一下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h2+p{
color: red;
}
</style>
</head>
<body>
<div>
<h2>我是一个标题</h2>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<h2>我是一个标题</h2>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<h2>我是一个标题</h2>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<h2>我是一个标题</h2>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
</div>

</div>

</body>
</html>


运行的结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航