CSS选择器
通用选择器
- 所有的元素都会被选中
- 一般用来给所有元素做一些通用性的设置
- 比如内边距、外边距
- 重置一些样式，比如a元素的下划线、字体颜色等
简单选择器
- 简单选择器是开发中用到的最多的选择器
- 元素选择器，使用元素的名称
- 类选择器，使用.类名
- id选择器，使用#id
属性选择器
- 拥有一个属性[att]
- 属性等于某个值[class=“ellipsis”]
后代选择器
- 选择器之间以空格分割
- div p{} 选择div中所有的后代元素p
- 直接子代选择器（必须是亲儿子）
- 选择器以 > 分割
- div > p 选择div为的所有亲儿子中为p的元素
兄弟元素选择器
- 相邻元素选择器
- .one + div 元素class为one的下一个兄弟元素并且为div的，如果下个兄弟元素不是div，则不会继续找
- 普遍兄弟元素选择器
- one ~ div 元素class为one的所有兄弟中为div的元素
选择器组 - 交集选择器
- 交集选择器：需要同时符合两个选择器的条件
- div.one ：表示选择的元素既要是div元素，并且class包含one
- 并集选择器：满足任意一个条件即可
- .one, .two 只要元素满足class为one或者two即可
伪类选择器
什么是伪类
- 伪类是选择器的一种，用来选择处于特定状态的元素
- 比如我们经常遇到的，当鼠标停留在某个元素上时，显示另外一个颜色
常见的伪类有：
- 动态伪类：
- a:link 未访问的链接
- a:visited 访问过的链接
- a:hover 鼠标挪动到连接上
- a:active 激活的链接（鼠标在链接上长按住不松开）
- 注意：:hover必须在:link和:visited后面才可以生效
- :active必须在hover后面才能生效
- 编写的顺序为：:line :visited :hover :active
- :focus指的是拥有输入焦点的元素
- 因为a元素可以被键盘的tab选中，所以也适用于a元素
- 动态伪类的编写顺序
- :link :visited :focus :hover :active
- 直接给a元素设置样式，相当于将所有的动态伪类都设置了
- 目标伪类：
- :target
- 语言伪类：
- :lang()
- 元素状态伪类
- :enabled、:disabled、:checked
- 结构伪类：
- :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
- :first-child、:last-child、:first-of-type、:last-of-type
- :root、:only-child、:only-of-type、:empty
- 否定伪类
- :not()
*参考所有伪类：*https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
- 动态伪类：