常用选择器

元素之间的关系

父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代的元素
后代元素:直接或间接被祖先元素包含的元素
兄弟元素:拥有相同父亲元素的元素

后代元素选择器

功能:指定元素的后代元素中的指定元素
祖先元素 后代元素{}

/*
为div中的span设置字体颜色为绿色
*/
div span{
	color: green;
}
/*将d1里面的p中的span的字体大小设置为30px*/
#d1 p span{
	font-size: 30px 0px 0px 0px;
}

子元素选择器

父元素>子元素{}
IE6及其以下选择器不支持子元素选择器

/*为div的子元素span设置背景颜色为黄色*/
div>span{
    background-color: yellow;
}

注意:后代元素选择器与子元素选择器区别
后代元素选择器:设置所有的后代元素,包括子元素
子元素选择器:只包含子元素


本文章使用limfx的vscode插件快速发布