选择器的作用就是将CSS样式和对应的需要修饰的标签关联起来,同时也增强了CSS代码的复用性,提高了代码效率。
首先来介绍基本的几个选择器
一、简单选择器
1、id选择器
<div id="only1"></div>
id选择器是在标签中增加一个id属性,并且为这个属性添加一个唯一的值。每个标签只能有一个id选择器。
之后,在CSS文件中定义这个id选择器:
#only1{
width:100px;
height:100px;
border-radius:50%;
background-color:black;
}
CSS中,定义ID选择器的格式为:#+[id名称]{}
在括号中定义需要的CSS样式。
2、class选择器
<div class="demo">hahaha</div>
<div class="demo demo1">对应多class值</div>
class选择器是在标签内定义一个class属性,并且为这个属性添加一个唯一的值。每个标签可以由多个class选择器。
比如class选择器demo负责定义背景颜色,class选择器demo1负责定义字体颜色,那么将两个结合之后就可以为这个<div>标签附上背景颜色和字体颜色的CSS样式了。可以通过多个class选择器的组合,为标签定义不同的CSS样式,这样提高了代码的灵活性和复用性,提高了编码效率和减少了重复代码数量。
.demo{
background-color: yellow;
}
.demo1{
color: red;
/*color是改动字体颜色*/
}
class选择器在CSS文件中的定义如上代码所示,格式为: .classname{}
下面举个例子展示一下class标签的灵活性。
<!--例子-->
<!--HTML代码-->
<div id="demo1">123</div>
<div id="demo2">234</div>
<div id="demo3">456</div>
<!--对应的CSS代码-->
#demo1{
width:100px;
height:100px;
margin:8px;
padding: 8px;
color: #f40;
}
#demo2{
width:100px;
height:100px;
margin:8px;
padding: