CSS优先级及选择器的认识

首先，css样式分为内联样式，内部样式，和外部样式。
内联样式：
就是直接定义在元素上的style，称为内联样式，其格式如下：

该种设置元素样式的方式称为内联样式
内部样式：
就是用<style></style>标签括起来的样式，称之为内部样式，其格式如下：

该种设置元素样式的方式称为内部样式
外部样式：
就是通过link 导入xxx.css的文件，称之为外部样式，格式为<link type=”text/css” rel=”stylesheet” href=”xxx.css” />：

这3种css样式的写入方式非常的简单，接下来就到了我们这篇文章的重点：css样式的优先级问题。
首先，我们建立一个div盒子，给他定义一个内部样式：

效果如下图：

接下来，我们来给这个div盒子定义一个内联样式：

效果如下图：

我们会发现，内联样式的属性值覆盖了内部样式的属性值。所以得出结论：
优先级：内联样式 ＞ 内部样式

接下来，我们来定义一个外部样式，外部样式的文件是一个以.css为后缀的空文件，我们可以直接在里面写入css样式：

然后我们在html页面引入这个css：

效果如下图：

可以看到，外部样式的font-family和font-weight已经起到了作用，但是color和font-size并没有覆盖掉内部样式的color和font-size，由此我们可以得知：
优先级：内部样式 ＞ 外部样式
那么经过3种css样式加载的对比，我们最后得出的总结是：
优先级： 内联样式 ＞ 内部样式 ＞ 外部样式
这个样式顺序遵循一个就近原则，哪个样式离元素近，哪个样式就生效。在开发里面，一般都采用的是外部样式，原因就是可以让页面和样式列表进行分离，而方便维护代码，提高工作效率。但是如果确定这个样式只针对当前页面。那么就可以考虑采用内部样式。内联样式几乎不用，因为这样会使代码非常的杂乱，不方便维护。

接下来我们来讲一下css的选择器，css的选择器有很多种，可以分为：
标签选择器，类选择器，ID选择器，包含选择器，指定选择器，分组选择器，通用选择器，子选择器，相邻选择器，属性选择器，伪类选择器。
其中，标签选择器，类选择器和ID选择器，我们已经很常用了，这里我一并给大家展现出来，就不多做解释了：

图中，<style></style>里面 div就是标签选择器，#testDiv就是ID选择器，.testDiv就是类选择器。如果这个还不懂的同学可以翻阅一下前面的文章。我已经做过很详细的介绍了。
包含选择器：包含选择器就是标签和标签之间的递进选择。如图：

注意，这4种都是可行的，都是一个意思。注意，这2个标签选择器之间用空格符号分隔开。后一个选择器一定是前一个选择器内的元素，否则的话是不会生效的。

这样的后代选择器样式，效果是：

接下来我们来看一下指定选择器：
我们定义一个盒子，在里面定义2个class不同的相同元素span，然后在style中写入css ，定义.divbox下面的 class= span1的span元素。

效果如下：

这里的.divbox span.span1是说明，该html网页要寻找到一个class=”divbox”的元素下的class=”span1”的span元素。然后将该元素的文字颜色设为红色。
分组选择器：
分组选择器选择的是需要有相同css定义的一组元素，这组元素可以没有什么关系，如图：

效果如图：

分组选择器之间以逗号分隔开。
子选择器：

效果如图：

如果层级关系是这样的：div>span>p,这个是正确的，但是div>p是错误的。子选择器只能找到当前选择器的直接子类。
相邻选择器：

效果如图：

代码格式是 ：element1 + element2， 中间是用加好，只能作用到相邻的一个元素，不能作用到多个。
属性选择器：

效果如图：

这2种写法都可以，[type=”text”] 所取的是元素的属性和属性值，div[id=”ruirui”]说明要寻找一个id为ruirui的div。
伪类选择器：
我们先定义一个div盒子和一个p：

现在，我要将p的第一个字加粗，这个时候就需要用到伪类选择器：

效果如下图：

first-letter代表的就是第一个字符。
现在我需要在我的p后面加上一些内容，这个时候就要用到:after伪类：

效果如图：

p标签的后面就加上了我们所填写的内容。这个有什么作用呢，比如说，在文字后面需要加一个箭头，一个下标，这些，都可以用到我们的:after伪类
同理，:before伪类的用法也和:after一样，这里就不做展示了。