今天学习了CSS中的选择器,所谓选择器,指的是选择施加样式目标的方式。选择器也是分为好多种,今天只是学习了其中的几种,让我们一起来回顾下。
1、元素选择器
使用标签名作为选择器,选中所有相应的元素。
<style type="text/css">
div{
font-size: 25px;
color: blue;
}
p{
font-size: 32px;
color: purple;
}
</style>
</head>
<body>
<div>元素选择器</div>
<p>元素选择器1</p>
<p>元素选择器2</p>
</body>
2、id选择器
是根据设置的id属性来选择元素,其样式定义为:
#idname{
.......
}
3、类选择器
根据class属性来选择元素,其样式定义形式为:
.className{
........}
.odd{
width: 200px;
height: 200px;
background-color: bisque;
}
.even{
width: 200px;
height: 200px;
background-color: lightskyblue;
}
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
从结果可以看出:.odd{.......}定义的样式会施加到所有的class=”odd”元素上,比如上例中的第一个和第三个<div>。当然也包括class=”odd”的<p>。
4、属性选择器
根据某个属性的特性(比如有无、值等)来选择。
<style type="text/css">
[title]{
width: 100px;
height: 100px;
background-color: blue;
border: 2px solid purple;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>5</div>
<div title="a div">3</div>
<div title="div a">4</div>
属性选择器中还有其他的一些符号来选中这些属性,会显示不同的结果,在这里就不一一列举了,有机会在详细的写上来,最后希望我以后会更好。