CSS选择器

一 前言

目前在做IFE的练习，初步学习到CSS内容，所以做了总结。
这篇博文主要介绍了CSS的选择器相关概念。

二 选择器类型

2.1 类型概述

CSS选择器 可以被分为以下类别:
S1 简单选择器
??A1 元素选择器
??A2 类选择器
??A3 ID选择器
??A4 通用选择器

S2 属性选择器
??A1 简单属性选择
??A2 具体属性值
??A3 部分属性值（子串值 属性选择器）

S3 伪类 和 伪元素 选择器

S4 派生选择器
??A1 h1,p {xxx}: h1 和 p 同时使用样式规则，他们是并列关系

S5 组合器
??A1 .xxx .yyy: 后代选择器，选中 .xxx元素的后代中的 含有.yyy类的元素;
??A2 直接子元素选择器 A > B;
??A3 相邻兄弟选择器 A + B
??A4 普通兄弟选择器 A ~ B

2.2 类选择器(注意点)

S1 通用类选择器 .xxx: 选取所有 含有xxx类属性 的HTML元素;
S2 元素特定类选择器 p.xxx: 选取含有xxx类属性的 p元素， 而不会选中含有xxx类属性的 span元素
S3 多类选择器
??HTML结构上

??A1 .xxx: 会对 p 和 a 应用样式;
??A2 .xxx.yyy: 会对含有 xxx & yyy的元素使用样式， 这里就是 p 和 span;
??A3 P.xxx.yyy: 只会对同时含有 xxx & yyy的 p元素使用样式， 这里就是 p元素

S4 类选择器和id选择器的区别联系
??A1 在HTML中，都区分大小写;
??A2 id属性的值是唯一的，而class属性值可以重复
??A3 一般实际开发情况下，id给js用，class给css用
??A4 应该根据 “他们是什么”来为元素命名，而不是“他们的外观是什么”

2.3 属性选择器(注意点)

S1 简单属性选择
??A1 a[class/href]: 选中所有 含有 href/class属性（属性值不限）的 a元素;
??A2 ahref: 选中 同时含有 href + title属性（属性值不限）的 a元素;

S2 具体属性值
??A1 a[href=‘xxx‘]: 选中 含有 href属性 + 属性值严格等于/完全匹配xxx的 a元素;
??A2 ahref=‘xxx‘: 选中 同时含有 href(属性值严格等于xxx) + title属性(属性值严格等于yyy)的 a元素;

S3 部分属性值（子串值 属性选择器）
??A1 a[href~=‘xxx‘]: 选中 含有 href属性 + 属性值中包含xxx即可的 a元素;
??A2 P[lang |=‘en‘]: 选中 含有 lang属性 + 属性值中等于en/ 以en开头的 p元素;

2.4 伪类/伪元素选择器(注意点)

S1 什么时候使用伪类：当希望某些样式，在特定状态下才应用到指定的元素时;

    伪类可以对一个元素的不同状态/类型进行区分

S2 结构伪类
??A1 :first-child伪类: 见MDN的 :first-child;
??类似的还有
??:last-child伪类;
??:first-of-type伪类 / :last-of-type伪类

??A2 :nth-child(num)
???? P:nth-child(2n)表示的含义是选中p其父元素下的 ，偶数位的元素，不管元素类型是不是P;

????thead th:nth-child(-n+2),表示的含义是选中 th其父元素thead下，其2-n(n≥0)数位的元素

??:nth-of-type(num)
????P:nth-of-type(2n)表示的含义是选中p其父元素下的 ，偶数位的元素，数位1是从 元素类型为P的元素开始计数的

??A3 :nth-last-child / :nth-of-type 同上，不过是从反向开始计数而已

S3 其他伪类
A1 :target伪类
A2 :empty伪类
A3 :not伪类 见MDN的 :not;

A4 链接伪类的推荐顺序是 link - visited - focus - hover - active

三 参考文档

??1 CSS权威指南;
??2 MDN的 简单选择器;
??3 MDN的 属性选择器;
??4 MDN的 伪类和伪元素选择器;
??5 MDN的 组合器和选择器组;

??6 CSS 派生选择器;