CSS的选择器
1、根据HTML的标记来修饰，
<style>p{
color:#FFOOFF;
text-decoration:underline;
font-size:25px;
font-weight:bold
}
h1{
color:red;
font-size:30px;}
</style>
所有的p标签按style中p声明的样式来修饰，h1标签按h1声明的样式来修饰
2、类别选择器，按照类来修饰
<style>
.Class1{
color:#FFOOFF;
text-decoration:underline;
font-size:25px;
font-weight:bold
}
.Class2{
color:red;
font-size:30px;}
</style>
<body>
<p class="Class1">选择类别为class1</p>
<p class="Class2">选择类别为class2</p>
<p class="Class3">选择类别为class3</p>
<body/>
这样相同的标签可以有各自的风格
3、混合选择器
<style>
.Class1{
color:#FFOOFF;
text-decoration:underline;
font-size:25px;
font-weight:bold
}
.Class2{
color:red;
font-size:30px;}
.Class3{
text-decoration:underline;
font-weight:bold
}
p{
color:#FFOOFF;
text-decoration:underline;
font-size:25px;
font-weight:bold
}
h1{
color:red;
font-size:30px;}
h1.Class1{
color:black;
font: 12px;
}
</style>
<body>
<h1>h1的标签修饰</h1>
<h1 class="Class1">选择类别为h1.class1</h1>
<p>p标签修饰</p>
<p class="Class1">选择类别为class1</p>
<p class="Class2">选择类别为class2</p>
<p class="Class2 Class3">选择类别为class2 class2 一起修饰</p>
<body/>
4、Id选择器
与类别选择器类似
<style>
#Id1{
color:#FFOOFF;
text-decoration:underline;
font-size:25px;
font-weight:bold
}
#Id2{
color:red;
font-size:30px;}
##Id3{
color:blue;
font-size:50px;}
</style>
<body>
<p id="Id1">选择类别为Id1</p>
<p id="Id2">选择类别为Id2</p>
<p id="id3">选择类别为Id3</p>
<body/>
HTML中声明Id时不能重复, 如下
<p id="Id1">选择类别为Id1</p>
<p id="Id1">选择类别为Id1</p>
这样在CSS中可能没有问题，但是Id还有其他作用，例如在Js中GetElementById()时则会出错
扫一扫
9363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
