很多前端初学者对 CSS 表示很头大，咨询w3cschool小狮妹如何学习 CSS 。总结发现一部分原因是由于我们对 CSS 没有很好的认识。虽然 CSS 只是前端工作的一小部分，但是它直接关系到网页最终显示效果，很值得我们去学习。

本文主要概述 CSS 的一些常见基础知识，帮助大家更好的理解 CSS 。

什么是 CSS？

CSS（层叠样式表）——英文 Cascading Style Sheets 的缩写，是一种计算机标记语言，用来表现 HTML （标准通用标记语言的一个应用）或 XML （标准通用标记语言的一个子集）等文件样式。

CSS 知识点太多记不住？

CSS 知识点确实很多，我们只需要学习并理解它的基础知识和原理，需要用到的时候再到w3cschool 查询CSS参考手册 ，不需要学习完所有的属性和值，但是学习 CSS 要有一些前端基础，如果没有这些基础，您将很难理解它，你可以先在W3Cschool上学习HTML 。 这样可以节省大量时间、少走很多弯路。

认识选择器（SELECTORS）

HTML 页面中的元素是通过 CSS 选择器 来进行控制的，可以实现一对一，一对多或者多对一的控制，学习 CSS 首先要掌握的就是选择器。一般使用 class 选择器（程序中称类选择器），或直接在body中使用 HTML 元素(elements) （指的是从开始标签(start tag)到结束标签(end tag)的所有代码。）来设置样式(Style)，但是一些更复杂的操作就需要更高级的选择器来实现了，如一些对象直接位于元素之后，或者是要选择表格中的奇数行，就需要根据元素在文档中的位置来选择元素。

这些选择器属于 CSS3 规范的一部分（你可能听说过它们被称为 CSS3 选择器）具有出色的浏览器支持。 有关可以使用的各种选择器的详细信息，请参阅W3Cschool的 CSS 选择器 。

有些选择器的行为就好像你已经将类（class） 应用于文档中的某些内容一样。 例如p:first-child就像你在第一个p元素中添加了一个类一样，这些被称为伪对象选择符(Pseudo-ElementSelectors)。 伪对象选择符的作用类似于动态插入元素，例如::first-line的作用与用span包裹第一行文本类似。但是，如果该行的长度发生变化，它将重新应用，如果插入该元素，就不会出现这种情况。 现在你可能会觉得这些选择器很复杂， 下面示例中是一个用伪类(Pseudo-class) 的伪元素(Pseudo Element) 例子。 我们使用:first-child伪类定位第一个p元素，然后::first-line选择器选择该元素的第一行，就好像在第一行周围添加了一个以使其变粗并更改颜色一样。

HTML代码：

html