选择器的语法:
选择器+{一条/多条声明}
选择器决定了针对谁进行修改,声明决定改什么。
选择器的功能:
选择页面中指定的元素(选中元素才能设置元素的属性)。
常⻅选择器
1.标签选择器:
特点:能快速为同一类型的标签都选择出来。
但不是差异化选择。
<style>
p {
color: red;
}
div {color: green;
}
</style>
<p>七里香</p>
<div>青花瓷</div>
2.类选择器:
选择器的语法:
选择器+{一条/多条声明}
选择器决定了针对谁进行修改,声明决定改什么。
选择器的功能:
选择页面中指定的元素(选中元素才能设置元素的属性)。
常⻅选择器
1.标签选择器:
特点:能快速为同一类型的标签都选择出来。
但不是差异化选择。
<style>
.blue {
color: blue;
}
</style>
<divclass="blue"></div>
<div>青花瓷</div>
2.类选择器
特点:差异化表示不同的标签
<style>
.box {
width: 200px;
height: 150px; }
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<divclass="box red"></div>
<divclass="box green"></div>
<divclass="box red"></div>
特点:差异化表示不同标签。
可以让多个标签都使用同一个标签。
3.id选择器:
特点:和类选择器类似。
CSS中使用#开头表示id选择器。
id选择器的值和html中某个元素的id值相同html的元素。
id不必带#id是唯一的,不能被多个标签使用(是和类选择器最大的区别)。
<style>
#wo {
color: red;
}
</style>
<divid="wo">喔喔喔</div>
4.通配符选择器:
特点:使用*定义,选取所有的标签。
* {
color: red;
}