CSS 中的选择器

一、CSS的引入方式

1: 外部样式表---在html中使用 <link>标签，引入外部的文件；

<link rel="stylesheet" type="text/css" href="./main.css">

2: 内嵌套样式表---在html中使用<style>标签，内容写在该标签里面；

<style>
    .class{
        width: 100px;
        height: 100px;
    }
    #id{
        width: 50px;
    }
</style>

3: 内连样式表，在html任意标签使用style属性，style标签内部是属性值；

<div class="class" style="width: 100px;">test</div>

二、CSS的选择器

id选择器（#id）：选择id属性为id的元素，使用#+id的形式；
class选择器（.class）：选择class属性为class的元素，使用.+class的形式，是比较常用的一种选择器；
标签选择器（div, p, h1）：直接选择div、p等标签；
子选择器（.class>div）:选择类名为class下面一层的div元素，只对子代有效，对子代的子代无效
后代选择器（.class div）:选择类名为class下面的所有div，对所有后代都生效；
伪类选择器（.class:hover）:选择类名为class的元素覆盖之后的属性，除了hover还有:focus,:link,:visited等等
兄弟选择器（.class~p）：对类名为class后面所有的p元素生效
相邻选择器（.class+p）: 对类名为class后面的相邻p元素生效
通配符选择器 [class*="clr"]{ color: red; width: 100px; } 选择所有类名中带有“clr”的元素；
属性选择器

简单的属性选择器：对有 href 属性的a 元素应用样式：a[href] {color:red;}

将同时有 href 和 title 属性的a 元素应用样式：a[href][title] {color:red;}

复杂的属性选择器：对href属性为www.baidu.com 且title为baidu的a元素设置样式： a[href="http://www.baidu.com/"][title="baidu"] {color: red;}

三、CSS选择器的权重

important（!important）：最高，忽略其他样式设置
内敛样式设置额权重（#id）：1000
id选择器（#id）：100
class选择器（.class）：10
属性选择器 :10
伪类选择器（.class:hover）:10
标签选择器（div, p, h1）：1
兄弟选择器（.class~p）：前后相加
相邻选择器（.class+p）: 前后相加
子选择器（.class>div）: 前后相加
后代选择器（.class div）: 前后相加

四、伪类和伪元素

伪类:

用来选择那些不能够被普通选择器选择的文档之外的元素，比如:hover

伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。

虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

常见伪类: :link,:visited,:hover,:active,:focus,:first-child,:last-child,:nth-child

伪元素:

伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中关于伪元素，它们更像是虚拟的元素可以和HTML元素一样对待。区别在于它们并不存在于文档树或者DOM之中。这意味着我们并没有真正的指定伪元素，但是可以使用CSS进行创建。

常见的几种伪元素是: :after(::after) , :before(::before) ，:first-letter 为了区分伪类和伪元素，所以建议伪元素用双冒号（after before这种单冒号也不会报错，但还是建议大家遵循最新的规范，写双冒号），

总结

伪类和伪元素都是用来表示文档树以外的"元素"
伪类和伪元素分别用单冒号:和双冒号::来表示（css3中伪元素使用的双冒号（但是IE8以下不兼容））
伪类和伪元素的区别，最关键的点在于如果没有伪元素(或伪类)，是否需要添加元素才能达到目的，如果是则是伪元素，反之则是伪类

这个写完之后，CSS先告一段落，下一篇开始整理一些JS和浏览器相关的知识啦！