携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
前言
前面我们通过元素名的方式去编写css的代码，但这样的话相同元素一多起来可能会出现非预期的元素都是相同样式的结果。想要针对某个特定元素编写样式的，有一种方式是通过类（class）来进行，当然还有很多方式，本文只介绍几种，下面我们来看看。
确定样式的几种方式
一、类
类是一种比元素名更具体的概念。我们在元素标签中加上类名class
就能够定义一个比元素标签更为具体的“选择”，收窄我们的选择范围，从而使此元素标签被我们选择到。
<h1>Hello World</h1>
<h1 class="special">Hello World</h1>
再编写元素h1和类specail的css来看看会不会有什么不同。
h1 {
color: red;
}
/* 相比元素名类名前用英文句号.来进行定义 */
.special {
color: blue;
}
效果
可以看到我们通过special类名选择到了第二个h1元素，当然这也有类的优先级会比元素名高的原因，这些后文再来了解。
二、选择符
使用类名是很好，但当我们元素一多它可能就不是一个好选择，因为你要在每个元素都定义class，略显繁琐。但通过html标签的结构我们可以知道html标签是有父子、兄弟的关系的，这样的话选择符就能发挥作用了。
包含选择符：A B
包含选择符让A元素的所有后代B都能被选择到
p em{
color:red
}
相邻选择符：A+B
相邻选择符选择相同层级的所有在A之后紧邻A的B元素
p+em{
color:red
}
三、状态
最后我们通过状态来选择某个元素，直观来说超链接是拥有点击前、鼠标悬浮、点击时、点击后这几种状态的。如此一来我们的选择便有了更多的余地。
a:link{color:red}
a:hover{color:grey}
a:active{color:pink}
a:visited{color:yellow}
如上便设置了四个状态对应的颜色
总结
本文我们多学习了几种确定样式的手段，下文将会针对css如何在浏览器上运行进行讲解
