CSS中的选择我们可以分为两种:类选择器和ID选择器。
类选择器:用 .class
表示,选取带有指定类 (class) 的元素,用于为具有相同类名的元素定义相同的样式。
ID选择器用:用 id
表示,它指定HTML元素的唯一ID,选择具有特定ID的元素,我们需要写一个 #
字符,后紧跟着元素ID。
定义一个无序列表,然后通过类选择器进行样式设置:
<style>
li{
font-size: 20px;
line-height: 26px;
}
.li1{color: green;}
.li2{color: red;}
</style>
<ul>
<li class="li1">同学计划</li>
<li class="li2">学习路线</li>
<li class="li1">教程系列</li>
<li class="li2">教程内容</li>
<li class="li1">文章在线</li>
<li class="li2">VIP会员</li>
<li class="li1">关于我们</li>
</ul>
定义一个id选择器:
<style>
#xkd{
color: green;
font-size:60px;
font-weight: bold;
}
</style>
<p id="xkd">侠课岛</p>
注意事项:
- id属性可以在任何HTML元素上使用
- id值区分大小写,它的值至少包含一个字符且不能包含空格
动手小练习
- 定义一段文本,然后在文本中设置一个id选择器在某个元素上,再对这个元素进行样式简单设置
- 定义一个无需或者是有序列表,通过类选择器对
- 标签进行统一样式设置