css随笔2—选择符
1.元素选择符
选择符一般是HTML预定义的某个元素例如p，h3，em，a，甚至html本身
例如：html {声明块}
h1 {声明块}
声明块中有一个或多个声明。声明的格式：属性：值（一个关键字或以空格分隔的多个关键字）；声明之间用“；”隔开
2.群组选择符（将同一个样式应用到多个元素上）
多个选择符之间用逗号隔开
通用选择符 * {声明块} 匹配所有元素
3.类选择符
首先为元素设置class属性
在CSS中，选择类的句法是在class属性的值前面加上“.”,并可以结合元素选择符一起使用，例如 p.app {color：red;} 表示包含app的p元素。
元素可设置多个类，中间用空格隔开
4.ID选择符
首先为元素设置id属性
在CSS中，选择类的句法是在class属性的值前面加上“#”，例如 #app {color：red;}
一个ID能且只能使用一次
5.属性选择符
元素名[属性名] {声明块}
元素名[属性名="属性值"] {声明块}
eg [foo~="bar"] 选择的元素有foo属性，且其值是包含bar这个词的一组词
[foo*="bar" ] 选择的元素有foo属性，且其值包含bar
[foo^="bar"] 选择的元素有foo属性，且其值以bar开头
[foo$="bar"] 选择的元素有foo属性，且其值以bar结尾
6.后代选择符
父元素+空格+后代元素 {声明块} ：层级无限，只要是后代元素就渲染
父元素>子元素{声明块}：只选择一个元素的子元素
相邻同胞元素间用“+” {声明块}
选择一个元素后面同属一个父元素的另一个元素，用"~"
7.伪类选择符（可拼接）
结构伪类
only-child 元素是另一个元素的唯一子元素
:only-of-type 匹配同胞中唯一的那种元素
:first-child 选择一个元素的第一个子元素,例如选择一个元素中第一个em元素—em:first-child
:last-child 选择一个元素的最后一个子元素
:first-of-type 选择一个元素中某种元素的第一个（同胞元素中找，不是找整个文档中的第一个）
:last-of-type 选择一个元素中某种元素的最后一个
:nth-child(n) 选择一个元素的第n个子元素，even和odd 奇偶
:nth-last-child() 同上，从后往前计算
:nth-of-type() 选择每第n个某种元素
:nth-last-oftype()同上，从后往前计算
链接伪类
:link 未访问的链接
:visited 已访问的链接
用户操作伪类
:focus 获得输入焦点的元素
:hover 鼠标指针放置其上的元素
:active 用户输入激活的元素
UI状态伪类
:enable 接受输入的元素
:disable 不接受输入的元素
:checked 用户或文档默认选中的单选按钮或复选框
:default 默认选中的单选按钮、复选框或选项
:valid 满足所有数据有效性语义的输入框
:invalid 不满足所有数据有效性语义的输入框
:in-range 输入的值在最小值和最大值之间的输入框
:out-of-range 输入的值小于控件允许的最小值或大于控件允许的最大值的输入框
:required 必须输入值的输入框
:optional 无需一定输入值的输入框
:read-write 可由用户编辑的输入框
:read-only 不能由用户编辑的输入框
:not() 否定伪类 依附在元素上，括号中是简单的选择符
8.伪元素选择符
::first-letter 用于修饰任何非行内元素的首字母（只能用于块级元素）
::first-line 用于修饰元素的首行文本（只能用于块级元素）
原文：https://www.cnblogs.com/northeast-boy/p/14932546.html