今天我想跟大家聊聊Css的话题。什么是CSS？CSS有什么作用？如何写好CSS？
Css的学名“层叠样式表”，是一种用来表现HTML或XML等文件样式的计算机语言。最初的网页采用table的方式进行排版，同时网页的样式以style的方式内嵌于标签内，随着web2.0时代的到来，网站的发展日新月异，需求也空前的大。这就给web开发者提出了更高的要求。CSS的问世，推进了网页表现与内容的分离，相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。CSS的最新版本为CSS3.0。
当然上面都不是今天的重点，今天的重点是CSS的选择器。都有哪些选择器？如何用这些选择器？他们的优先级是怎么样的？
其实CSS选择器的种类非常多，下面就让我来列举一下都有哪些选择器吧。
1、#id
选择id为id的元素,每个页面只能有一个相同的id名，不能重复
2、.class
选择所有class为class的元素,可以重复
3、element
div：选择所有div
4、*
*：选取所有元素
5、element,element
div,p,span： 选择所有div，p，span
6、element element
div p：选择div下面所有p，这里不限层级
7、element > element
选择所有父元素为div的p元素,不限层级，但是仅仅只有父元素为div的p会生效
8、element+element
div+p：选择紧接在div后面的所有p元素，可以多匹配，这里仅指兄弟元素，不能选择子元素
9、[attribute]
[href]：选择所有包含href属性的元素
10、[attribute=value]
[href=www.baidu.com]：选择所有href=“www.baidu.com”的元素
11、[attribute~=value]
[href~=baidu]：选择所有href属性包含baidu的元素，这里只要是包含就能匹配到
12、[attribute|=value]
[name|=wang]：选择所有name属性以wang开头的所有元素
13、[attribute^=value]
a[src^="https"]：选择其 src 属性值以 "https" 开头的每个 元素，与第12个是有区别的
14、[attribute$=value]
a[src$=".pdf"]：选择其 src 属性值以 ".pdf" 结尾的每个 元素
15、[attribute*=value]
a[src*="abc"]：选择其 src 属性中包含 "abc" 子串的每个 元素
16、:first-of-type
p:first-of-type：选择属于其父元素的首个
元素的每个
元素，这个可能会有点儿不太好懂，其实就是选择每个元素下的首个p元素
17、:last-of-type
p:last-of-type：选择属于其父元素的最后一个
元素的每个
元素，这个可能也会有点儿不太好懂，其实就是选择每个元素下的最后一个p元素
18、:only-of-type
p:only-of-type：选择属于其父元素唯一的
元素的每个
元素，是不是也有点儿绕呢？其实就是选择没有同级p元素的p元素。
19、:only-child
p:only-child：选择属于其父元素的唯一子元素的每个p元素，跟第18个不一样，这里p的父元素只有一个子元素
20、:nth-child(n)
p:nth-child(2)：选择属于其父元素的第二个子元素的每个
元素，这里的p的索引值index＝0；
21、:nth-last-child(n)
p:nth-last-child(2)：选择属于其父元素的倒数第二个子元素的每个
元素
22、:nth-of-type(n)
p:nth-of-type(2)：选择属于其父元素第二个
元素的每个
元素，跟第20个有本质的区别，这里的p元素的索引值不一定为1。
22、:nth-last-of-type(2)
p:nth-last-of-type(2)：选择属于其父元素倒数第二个
元素的每个
元素，跟第21个有本质的区别
23、:last-child
p:last-child：选择属于其父元素最后一个子元素每个
元素
24、:root
选择文档的根元素，其实就是指
25、:empty
p:empty：选择没有子元素的每个
元素，文本在这里也算子元素
就写这些吧，伪类相比之下很简单了，这里就不写了，大家都会的。尤其是第10到23这些个，理解起来相对比较复杂一点，多动手试试就理解了。
其实还有很多我没有列举的，可以自行脑补一下。这里所列的可以对我们的工作带来很多方便，可以免掉用js去实现某些本可以用css实现的效果。
CSS其实并不简单，要写出一套很优美的CSS是一件非常难的事情，其中选择器只是第一步，还需要将各种CSS属性和属性值烂熟于心。
欢迎关注我的个人公众号：年轻大叔
网友评论