子选择器的使用-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)