CSS学习笔记伪类和伪元素

伪类和伪元素

单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。 根本区别在于是否创造了新的元素。

伪类

• :link “链接”：超链接点击之前；

• :visited “访问过的”：链接被访问过之后；

• :hover “悬停”：鼠标放到标签上的时候；

• :active “激活”： 鼠标点击标签，但是不松手时；

• :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）；

• :first-child 选择某个元素的第一个子元素；

• :last-child选择某个元素的最后一个子元素；

• :nth-child()选择某个元素的一个或多个特定的子元素；

• :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

• :nth-of-type()选择指定的元素；

• :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；

• :first-of-type 选择一个上级元素下的第一个同类子元素；

• :last-of-type 选择一个上级元素的最后一个同类子元素；

• :only-child 选择的元素是它的父元素的唯一一个子元素；

• :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；

• :empty 选择的元素里面没有任何内容；

• :checked匹配被选中的input元素，这个input元素包括radio和checkbox；

• :default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮；

• :disabled匹配禁用的表单元素；

• :enabled匹配没有设置disabled属性的表单元素；

• :valid匹配条件验证正确的表单元素；

伪元素

• ::first-letter 选择元素文本的第一个字（母）；

• ::first-line 选择元素文本的第一行；

• ::before 在元素内容的最前面添加新内容；

• ::after 在元素内容的最后面添加新内容；

• ::selection匹配用户被用户选中或者处于高亮状态的部分；

• ::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效；

•