首页 > 代码库 > css的三大选择器
css的三大选择器
三大选择器
派生选择器，他的的语法特点是：标记名称{ }
接下来举个例子
body{
babackground-image: url("img/5.jpg");
padding: 0px;">background-repeat:no-repeat;
}
这是一个简单的背景派生选择器的运用，从这个例子也可以看出这个样式只能用于body标记，当然不止如此，派生选择器还可以这样用，在看一个例子
dl dd{
display: none;
width: 80px;
height: 30px;
}
在这里的意思dl 内的dd标签的样式是这样。
id 选择器，他的语法特点是：#id名称{ }
我们在来看一个例子
#logo {
color:blue;
font-style: inherit;
font-size:60px
width: 100;
height: 60px;
}
下面的是引用id选择器
<div id="logo" ><center style="font-size: 50px;">我的网页设计</center> </div>
从这个简单的实例也可以轻易的看出，只有id为logo的标记，才能使用#logo的样式
- 类选择器，它的语法特点是：.类名{ }
接下来在来看一个简单实例吧
.back{
background-image: url("img/5.jpg");
padding: 0px;">background-repeat:no-repeat;
}
接下来的类选择器的引用
<div class="back"></div>
从这里也可以看出id选择器和类选择器的区别，类选择器只要是class="back",都能引用类选择器，也即是id选择器是只能用在一个标记里，因为每个标记的id是不能重复的，然而类选择器可以用在每个标记里。
在来看下三种选择器的混合使用
#menu dl dd{
display: none;
width: 80px;
height: 30px;
}
接下来它的引用
<div id="menu">
在这里使用了id选择器和派生选择器，也即是id为menu 的标记div内的dd样式如上。
.menu dl dd{
display: none;
width: 80px;
height: 30px;
}
接下来它的引用
<div class="menu">
这个是类选择器和派生选择器的混合使用，也即是类名为menu 的标记div内的dd样式如上。