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结构上 <p class="xxx yyy zzz"> <span class="xxx yyy"> <a class="xxx">
  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 派生选择器;