子选择器的使用-CSS入门基础（004）
今天我们继续分享关于选择器的内容。
子元素选择器，就是选中某个或某一类元素的子元素。
语法：
#father #child {width:100px;height:100px}#父层 #子层 {属性1：属性值；属性2：属性值}
父元素与子元素必须用空格分隔开，表示在父元素包含下的子元素。
示例代码：
<html><head><title>子元素选择器</title><style type="text/css">#father1{width:400px;height:400px;border:1px solid black;}#father1 div{background-color:green;}#father2{width:300px;width:200px;border:1px solid black;}#father2 #p1{color:blue;}</style></head><body><div id="father1"><div>区域一子元素</div><div>区域二子元素</div></div><div id="father2"><p id="p1">内容</p><p id="p2">内容</p></div></body></html>
预览浏览器后，我们会发现father1和father2都设置了宽度高度和边框，然后使用father1 div，表示第一个div区域下的全部div，都设置背景色为绿色；而father2 p1则表示，第二个div区域下只有p1元素，设置了字体蓝色，不影响其他的段落标签。
相邻选择器：
相邻选择器，就是选中元素的下一个兄弟元素。在这里注意一点，相邻选择器的操作对象是该元素的同级元素。
语法：
#friend div {width:100px;height:100px;}#元素 相邻元素 {width:100px;height:100px;}
示例代码：
<html><head><title>相邻选择器</title><style type="text/css">#friend{width:200px;height:200px;border:1px solid black;}#friend div{width:200px;height:200px;border:1px solid black;background-color:green;}</style></head><body><div>区域一</div><div id="friend">区域二</div><div>区域三</div></body></html>
使用#friend div，表示与friend相邻的div，也就是下一个兄弟元素，起作用，与上面的不起作用。
群组选择器：
群组选择器，就是同时对好几个元素进行相同的操作。这个一般都是在对页面元素进行默认值设定时使用的，便于管理，也减少冗余代码。
语法：
h1,h3,div,p,span {margin:0;padding:0;}示例代码：
<html><head><title>群组选择器</title><style>h3,p,div,span{background-color:green;color:white;}</style></head><body><h3>标题内容</h3><p>段落内容</p><div>分隔内容</div><span>行内容</span></body></html>
预览浏览器后，大家会发现以上几个元素，背景色均为绿色，字体色均为白色了，这个就是群组选择器的作用。另外插一句，大家看绿色的大小会发现，h3，p，div都是block块元素，而只有span是inline行元素。
以上分享的选择器内容，基本覆盖选择器90%以上的内容了，也够用了，其他那些更高级，更复杂的选择器，今后学习高级教程时，再给大家分享。
赞 (0)