CSS 子元素选择器与后代选择器区别实例讲解

最新推荐文章于 2023-05-13 16:17:13 发布

weixin_33694172

最新推荐文章于 2023-05-13 16:17:13 发布

阅读量457

点赞数

原文链接：http://www.cnblogs.com/myhomepages/p/6010057.html

版权

css子元素选择器和后代选择器在功能描述上非常相同，但是他们其实是有区别的，本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别，需要的朋友可以参考一下。
首先我们来了解一下子元素选择器与后代选择器的基本语法

语法

子元素选择器的语法如下：

div>ul{color：red；}

子元素选择器使用大于号">"做为连接符，子元素选择器只能选择作为某元素子元素的元素

后代选择器的语法如下：

h1 em{color:red;}

后代选择器可以选择作为某元素后代的元素,父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。

二者区别：

我们通过一个实例来讲解子选择器与后代选择器的区别
先来看一下后代选择器div p的效果

<!DOCTYPE html>
<html>
<head>
<title>http://www.manongjc.com</title>
<style>
div p{
    background-color:yellow;
}
</style>
</head>
<body>
<div>
    <p>子元素选择器</p>
    <span><p>后代选择器</p></span>
</div>
</body>
</html>

运行结果如图：

css 子选择器

再来看一下子选择器div p的效果

<!DOCTYPE html>
<html>
<title>http://www.manongjc.com/article/1075.html</title>
<head>
<style>
div>p{
    background-color:yellow;
}
</style>
</head>
<body>
<div>
    <p>子元素选择器</p>
    <span><p>后代选择器</p></span>
</div>
</body>
</html>

运行结果如图：

从上面实例可以看出子选择器只作用于其第一代元素，而后代选择器作用于N（N为自然数）代元素。

原文地址：http://www.manongjc.com/article/1075.html

其他阅读：

css :hover伪类选择器实例分析 CSS :focus 伪类选择器使用详解 css required valid和invalid选择器详解 css :lang选择器使用详解 css :in-range伪类选择器使用实例分析

转载于:https://www.cnblogs.com/myhomepages/p/6010057.html

weixin_33694172

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 子元素选择器与后代选择器区别实例讲解

css子元素选择器和后代选择器在功能描述上非常相同，但是他们其实是有区别的，本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别，需要的朋友可以参考一下。首先我们来了解一下子元素选择器与后代选择器的基本语法语法子元素选择器的语法如下：div>ul{color：red；}子元素选择器使用大于号">"做为连接符，子元素选择器只能选择作为某元素子元素的元素...
复制链接

扫一扫