花样匹配 -- 选择符

对于 CSS 来说，选择符是最基本的特性，若能熟练掌握，会带来匹配效率和页面结构上的提升！

我们将根据六个不同的维度来介绍 CSS 的选择符

群组选择符

	div, p, span {
		color: orange;
		border: 1px solid blue;
	}

类选择符 & ID 选择符

class 和 id 应该是最常用的属性了吧哈哈哈

	#my_id, .my-class {
		color: red;
	}

属性选择符

1、基于属性值匹配

	/* 匹配具有 href 属性值的 a 元素 */
	a[href] {
		color: green;
	}

2、精确匹配

	/* 精确匹配 具体属性值 的元素 */
	a[href="www.baidu.com"] {
		color: orange;
	}

	img[class="banner-cover"][alt="cover"] {
		border-radius: 8px;
	}

3、根据规则匹配

形式	说明
[foo|=“bar”]	foo 属性的值以 bar- 开头 或 bar 本身
[foo~=“bar”]	foo 属性的值是包含 bar 的一组词
[foo*=“bar”]	foo 属性的值包含子串 bar
[foo^=“bar”]	foo 属性的值以 bar 开头
[foo$=“bar”]	foo 属性的值以 bar 结尾

4、不区分大小写的标识符 i

	/* .PDF、.pdf 等结尾的链接都能被选中 */
	a[href$=".PDF" i] {
		color: red;
	}

根据文档结构选择

1、后代选择符

	/* div 后代的所有 p 元素 */
	div p {
		font-size: 16px;
	}

2、子代选择符

	/* 只属于 div 子代的 p 元素 */
	div > p {
		color: #666;
	}

3、紧邻同胞选择符

	/* 紧挨着 p 元素的 img 元素 */
	p + img {
		color: #666;
	}

4、后续同胞选择符

	/* div 后续同胞中所有 ul 元素 */
	div ~ ul {
		padding-left: 16px;
	}

伪类选择符

何为伪类选择符？
利用伪类选择符，可以为文档中不一定真实存在的结构指定样式，或为某些元素的特定状态赋予幽灵类；

拼接伪类

	/* CSS 允许将伪类串联拼接在一起 */
	a:link:hover {
		color: orange;
	}

结构型伪类

• :root
  根元素，HTML 中即为 html 元素
• :empty
  空元素，没有任何子代的元素
• :only-child
  该元素为唯一的子元素
• :only-of-type
  该元素类型唯一的子元素

	/* 匹配 div 子元素中唯一的 img 类型 */
	div img:only-of-type {
		margin-bottom: 12px;
	}

• :first-child

	/* 
	 * 某类元素的第一个元素
	 * 如 class 为 list 的第一个 div 元素
	 */
	div.list:first-child {
		margin-top: 0;
	}

• :last-child
• :first-of-type
• :last-of-type
• :nth-child(n)
• :nth-last-child(n)
• :nth-of-type(n)
• :nth-last-of-type(n)

动态伪类

• 链接伪类
  • :link
  • :visited
• 用户操作伪类
  • :focus
  • :hover
  • :active
• UI 状态伪类
• 否定伪类 not()

伪元素选择符

伪元素与伪类很像，为了实现特定的效果，它会在文档中插入特定的元素；
为了与伪类区分开，伪元素用两个冒号 :: 表示；
但在 CSS2 中，这两种选择符都使用一个冒号，因此为了向后兼容，浏览器也接受使用单个冒号的伪元素选择符。

::first-letter

用于装饰非行内元素的首字母

::first-line

装饰首行文字

::before

创建并装饰前置内容

::after

创建并装饰后置内容