类

ID

* 通配符：选择所有的子元素

子选择器 >

后代选择器 ：（空格）

同辈“弟弟选择器” p~ul，这里的p和ul（们）有相同的父元素，

p和ul同辈且ul在p的后面就可以。选中的是ul（们）哦~~

相邻选择器 + ：

例：（div + p）选择所有紧跟着div的p元素。注意选择的是+后面的p元素，而且要是跟着div后面的第一个p，

<div>我是p前面的div</div>
<p>我被选中了</p>
<p>我没被选中</p>

属性选择器

[target = "_blank"] 选择target = "_blank"的所有元素
[title ~= "flower"] 选择 所有title属性 包含flower的所有元素。注意：这里的包含是指有空格分隔开的flower。

<div title="bird flower">鸟和花</div>
<div title="flowerbird">花鸟</div>

这里被选中的是鸟和花。

[lang|= "en"] 选择的是lang属性的属性值以en或者en-开头的所有元素。
[src ^= "https"] 选择的是src以https开头的所有元素
[src $= "pdf"] 选择的是src以pdf结尾的所有元素
[src *= "https"] 选择的是src包含“https”的所有元素。注意这里与上面“~”的区别，这里只要是包含https这个子串就可以。

伪类：首先要声明的是伪类只是元素扮演的某种角色或者说经历的某种状态，被选择的还是元素本身。

a:link 和a:visited 分别代表未被访问过的连接和已经访问过的连接。
而：hover 和：active 分别代表 鼠标悬浮于连接之上和链接被点击
：hover不仅仅适用于a标签，也适用于其他的元素。
：focus 表示元素获取焦点 多用于input。
p:first-of-type 选择的这个p元素是他父元素下面p元素中的第一个。
类似的还有p：last-of-type 选择的就是父元素里面的p元素中的最后一个。
p：only-of-type 选择的是这个p是其父元素下面唯一的一个p元素，该父元素可以有其他的元素，但是p除外。
这三个里面都有个type（类型），也就是说这三个选择器描述的都是在同类型中的相对位置。
p:first-child/:last-child 选择 首先是p元素，第二，是其父元素的第一/最后一个子元素。

p：only-child 选择的是 这个p是他父元素唯一的子元素，那么选择他，两个条件：首先要是p元素，第二要是其父元素的唯一子元素。
p：nth-child（n）要满足两个条件。第一是p元素，第二是其父元素的第n个子元素。
p：nth-last-child（n） 和上面一样，但是是从父元素的最后一个子元素开始计数。
p：nth-of-type（n） 第一是p元素，第二 这个p元素在其同辈的p元素集合里面排在第n位。
p：nth-last-of-type（n）和上面一样，但是在同辈p元素集合中反着数。
:root 选择的是文档的根元素。
：empty 选择的是没有子元素的元素（包括文本节点）。
：not（selector）
例： ：not（p）
选择非<p>元素的所有元素。
::selection
选择被用户选取的元素部分。

伪元素

::first-letter 第一个字母（只能用于块级元素）
::first-line 第一行 （只能用于块级元素）
::before
::after