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

CSS子选择器和后代选择器之间有什么区别?下面本篇文章就来给大家对比一下子选择器和后代选择器,介绍子选择器和后代选择器之间的区别,希望对大家有所帮助。
CSS中子选择器和后代选择器之间有什么区别_第1张图片

子选择器

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

语法:

element > element {
    // CSS属性
}

示例:仅匹配

元素的所有子元素–

元素



	
		
		CSS 子选择器  
		 
     
    "text-align: center;">  
        

CSS 子选择器

这是一个测试的p段落。p标签在div标签内!

这是一个测试的文字。strong标签在div标签内的p标签中!

这是一个测试的文字。strong标签在div标签内!

这是一个测试的p段落。p标签不在div标签内!

这是一个测试的p段落。p标签不在div标签内!

效果图:

CSS中子选择器和后代选择器之间有什么区别_第2张图片

后代选择器

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

语法:

element element {
    // CSS 属性
}

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



	
		
		CSS 后代选择器  
		 
     
    "text-align: center;">  
        

CSS 后代选择器

Hello!

这是一个测试的p段落。

这是一个测试文字。

这是一个测试的p段落。

效果图:
CSS中子选择器和后代选择器之间有什么区别_第3张图片

总结:

子选择器和后代选择器的区别:子选择器只能选择自己的子类,第二级元素,而不能选择第二级别以下的元素。后代选择能指定的对象,只要是元素下面的元素,无论几级,都能选定。
更多编程知识可以关注php中文网。

推荐阅读:

php服务器

php5下载

你可能感兴趣的:(css,css,选择器)