1. 根底选择器
(1) 通配符选择器 * {}(2) 类选择器 .类名{}(3) ID选择器(具备唯一性) .ID {}(4) 元素选择器(标签选择器) div {}
2. 关系选择器
(1) 后盾选择器 ‘ ’ 如 div p{} div下的所有p标签都会失效(2) 子代选择器 > 只有第一个div下的p标签失效 第二个div下的p标签不失效 div>p{} <div> <p><p> <div>p</div> </div>(3) 相邻兄弟选择器 + p+span{} 只有我是第一个span失效 <div> <p></p> <span>我是第一个span</span> <span>我是第二个span<span> </div>(4) 通用兄弟选择器 ~ 即兄弟级别的都能够失效
3. 伪类选择器
(1) 超链接相干 a. :link 超链接点击之前(只实用于a标签) b. :visited 超链接被拜访过之后(只实用于a标签) c. :hover 鼠标悬停 d. :active 鼠标点击但不松手时(2) :first-child 选择器 匹配父元素中的第一个子元素(3) :last-child 选择器 匹配父元素中的最初一个子元素(4) :nth-child(n) 选择器 匹配父元素中的第n个子元素 元素类型没有限度 n能够是数字 也能够是关键字 其中也能够将n设置为奇数,即odd 偶数为even(5) :only-child 选择器 匹配父元素中只有一个子元素的元素(6) :empty 选择器 匹配没有任何子元素的元素,包含文本节点(7) :not() 选择器 匹配每个元素是不是指定的元素/选择器(8) :focus 选择器 用于抉择具备焦点的元素 个别用于input标签(9) :checked 选择器 匹配每个选中的选中器(仅实用于单选框和复选框)
4. 伪对象选择器
::befor 和 ::after 用于在被选元素的后面或前面增加内容 用来和content属性一起应用。
5. 属性选择器