选择器分类

• 简单选择器：针对某一特征判断是否选中元素。
• 复合选择器：连续的简单选择器，根据元素特征判断是否选中单个元素。
• 复杂选择器：由“（空格）“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器，根据父元素或者前序元素检查单个元素。
• 选择器类别：用逗号分隔的复杂选择器，表示“或”。

简单选择器

简单选择器分类：

• 类型选择器
• 全体选择器
• id选择器
• class选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

类型选择器

根据标签名来选中元素。

div{ }

全体选择器

“*”可以选中任意元素。

*{ }

id选择器

“#”后面跟id名。

#myid{ }

class选择器

“.”后面跟class名 c 一个元素可以拥有多个类。下例中“.a” “.b” “ .c”都可以选中div标签。

 <div class="a b c"></div> .a{ }

属性选择器

• 第一种，[att]: 选中带有att属性的元素

<input type="text"/> [type]{ }

• 第二种，[att=val]: 选中att属性值为val的元素

<input type="text"/> [type=text]{ }

• 第三种，[att~=val]: 选中属性att的值中包含指定词汇的元素

<img src="" title="img1 img2" /> [type~=img1]{ }

• 第四种，[att|=val]: 选中属性att值以val开头的元素，val必须为整个单词

<p lang="en-us">Hello World!</p> [type|=en]{ }

• 第五种，[att^=val]: 选中属性att值以val开头的元素

<input type="text"/> [type^=te]{ }

• 第六种，[att$=val]: 选中属性att值以val结束的元素

<input type="text"/> [type^=xt]{ }

• 第七种，[att*=val]: 选中属性att值包含val的元素

<input type="text"/> [type*=ex]{ }

属性选择器中val可能包含特殊字符，所以可以使用单双引号包裹起来规避特殊字符，也可以使用反斜杠转义。

伪类选择器

伪类选择器是一系列由 CSS 规定好的选择器，它们以冒号开头。伪类选择器有普通型和函数型两种。

树结构关系伪类选择器

• :root表示树的根元素，html文档中根元素为html标签。
• :empty表示没有子节点的元素，拥有空白文本也不能被选中。
• :nth-child和:nth-last-child，nth-child规则如下。nth-last-child为从后向前。
  
• :first-child和:last-child分别表示第一个和最后一个元素。
• :only-child表示唯一子元素
• S:nth-of-type和S:nth-last-of-type表示只从S只选中。(of-type系列同理)

<div> <p>1</p> <a>2</a> <p>3</p> <p>4</p> </div> div p:nth-child(1){ //选中 1 } div p:nth-child(2){ // 没有选中 } div p:nth-of-type(2){ // 选中3 }

• :first-of-type和:last-of-type

<div> <p>1</p> <a>2</a> <p>3</p> <p>4</p> </div> div p:first-child{ //选中1 } div a:first-child{ //没有选中 } div a:first-of-type{ //选中2 }

• :only-of-type

<div> <p>1</p> <a>2</a> </div> div p:only-child{ //没有选中 } div p:only-of-type{ //选中p }

链接与行为伪类选择器

• :any-link 表示任意的链接，包括 a、area 和 link 标签都可能匹配到这个伪类。
• :link 表示未访问过的链接， :visited 表示已经访问过的链接。
• :hover 表示鼠标悬停在上的元素。
• :active 表示用户正在激活这个元素，如用户按下按钮，鼠标还未抬起时，这个按钮就处于激活状态。
• :focus 表示焦点落在这个元素之上。
• :target 用于选中浏览器 URL 的 hash 部分所指示的元素。

逻辑伪类选择器

:not目前只支持简单选择器

<div> <p class="p1">1</p> <p>2</p> </div> div p:not(.p1){ //选中2 }

伪元素选择器

伪元素选择器选中的是不存在的元素。常用的伪元素选择器有以下几种。

• first-line 选用元素的第一行
• first-letter 选中元素的第一个字母
• before
• after

first-line 必须出现在最内层的块级元素之内。所以下例代码中第一行为蓝色。

<div> <p id=a>First paragraph</p> <p>Second paragraph</p> </div> div>p#a { color:green; } div::first-line { color:blue; }

span标签为行级元素，所以伪元素在span之外，第一行为绿色。

<div> <span id=a>First paragraph</span> <span>Second paragraph</span> </div> div>span#a { color:green; } div::first-line { color:blue; }

::first-letter 的行为又有所不同，它的位置在所有标签之内。我们把前面的代码换成::first-letter，首字母为蓝色。

<div> <span id=a>First paragraph</span> <span>Second paragraph</span> </div> div>span#a { color:green; } div::first-letter { color:blue; }

::before 表示在元素内容之前插入一个虚拟的元素，::after 则表示在元素内容之后插入。这两个伪元素所在的 CSS 规则必须指定 content 属性才会生效，我们看下例子：

<p class="hi">hellow world!</p> p.hi::before { display: block; content: "hi! "; }