1,类选择器,将class为 p1,p2的段落 行高设置为10px
解题:
<1>.元素选择器,就是通过标签名字找到这个元素的,例如 p---->就代表找到所有的p标签
解答:
类选择器,通过类属性找到某个标签的方法,用法 .类名,为了更具体的定位到某个元素,我们通常还会这样写 p.p1---->代表找到class为p1的p标签
<html>
<head>
</head>
<style>
.p1
{
line-height:10px;
}
.p2
{
line-height:10px;
}
/*或
.p1,.p2
{
line-height:10px;
}
*/
</style>
<body>
<p class="p1">这是段落1</p>
<p class="p2">这是段落2</p>
<p class="p2">这是段落3</p>
</body>
</html>
2.id选择器,将id 为 bg的div背景设置为,这张图片,不平铺
解答:
<2>.*id选择器,就是通过id属性来找到某个标签的方法,用法 #id值,注意:id属性是唯一的,同一个标签不能重复使用
<html>
<head>
</head>
<style>
#bg{
background-image:url("baidu.png"); /*显示图片*/
height:32px; /*高度为32PX*/
background-repeat:no-repeat; /*图片不平铺*/
}
</style>
<body>
<div id="bg"> 这是div</div>
</body>
</html>
3,关联选择器,将茄子加粗,将黄瓜变为 斜体
解答:
<3>.关联选择器,又称为上下文关系选择器,通过标签的上下文关系来找到这个标签,用选择器(空格) 选择器,表示第一个标签里面的标签
<html>
<head>
<style>
ul.ul1 li.vegetable
{
font-weight:bold;
}
ul.ul2 li.vegetable
{
font-style:italic;
}
</style>
</head>
<body>
<ul class="ul1">
<li>橘子</li>
<li>苹果</li>
<li>梨</li>
<li class='vegetable'>茄子</li>
</ul>
<ul class="ul2">
<li>橘子</li>
<li>苹果</li>
<li>梨</li>
<li class='vegetable'>黄瓜</li>
</ul>
</body>
</html>
4,组合选择器,将黄瓜和 class为p1的段落字体设置为 35px
解答:
<4>.组合选择器,多个选择器之间并列的共享一个样式,用法:用,隔开
<html>
<head>
<style>
ul.ul2 li.vegetable,.p1
{
font-size:35px;
}
</style>
</head>
<body>
<p class="p1">这是段落1</p>
<ul class="ul2">
<li>橘子</li>
<li>苹果</li>
<li>梨</li>
<li class='vegetable'>黄瓜</li>
</ul>
</body>
</html>