CSS中子选择器和后代选择器之间有什么区别

最新推荐文章于 2023-06-27 15:36:23 发布

weixin_45587319

最新推荐文章于 2023-06-27 15:36:23 发布

阅读量1.6k

点赞数 1

分类专栏： css 文章标签： css 选择器

原文链接：https://www.html.cn/qa/css3/10329.html

版权

css 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

CSS子选择器和后代选择器之间有什么区别？下面本篇文章就来给大家对比一下子选择器和后代选择器，介绍子选择器和后代选择器之间的区别，希望对大家有所帮助。
在这里插入图片描述

子选择器

子选择器用于匹配指定元素的所有子元素；它给出了两个元素之间的关系。该element > element选择器选择那些属于特定父元素的子元素。其中’>'左侧的操作数是父级，右侧的操作数是子元素。

语法：

element > element {
    // CSS属性
}

示例：仅匹配

元素的所有子元素–

元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS 子选择器  </title>
		<style>  
            div > p {  
                color:white;  
                background: red;  
                padding:2px;  
            }  
            div > strong {  
                color:green;  
                padding:2px;  
            }  
        </style> 
    </head> 
    <body style = "text-align: center;">  
        <div>  
            <h2>CSS 子选择器  </h2>  
            <p>这是一个测试的p段落。p标签在div标签内！</p>  
            <p>
            	<strong>这是一个测试的文字。strong标签在div标签内的p标签中！</strong>
            </p>
        </div>  
        <div>  
            <strong>这是一个测试的文字。strong标签在div标签内！</strong>  
        </div> 
        <p>这是一个测试的p段落。p标签不在div标签内！</p>  
          
        <p>这是一个测试的p段落。p标签不在div标签内！</p>  
    </body>  
</html>

效果图：

在这里插入图片描述

后代选择器

后代选择器用于选择元素（不是特定元素）的所有子元素。它选择元素内部的元素，也就是说，它组合了两个选择器，这样，如果与第二个选择器匹配的元素具有与第一个选择器匹配的祖先元素，那么它们就会被选中。

语法：

element element {
    // CSS 属性
}

示例：选择div的所有子元素–p元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS 后代选择器  </title>
		<style>  
            div p { 
	            font-size:26px; 
	            color:red;
	        } 
	        div strong { 
	            background: green;
	        } 
        </style> 
    </head> 
    <body style = "text-align: center;">  
        <div>  
            <p>CSS 后代选择器 </p>
            <p> 
	            <strong>Hello！</strong> 
	       </p> 
        </div>  
          
        <div>
        	<p>这是一个测试的p段落。</p>        
        </div>
         <div>
        	<strong>这是一个测试文字。</strong>        
        </div> 
        <p>这是一个测试的p段落。</p>  
    </body>  
</html>