CSS
引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover
来描述这个元素的状态。虽然它和普通的css
类相似,可以为已有的元素添加样式,但是它只有处于dom
树无法描述的状态下才能为元素添加样式,所以将其称为伪类。
是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式,而进入另一状态后,该样式也会失去。
:link
应用于未被访问过的链接。:hover
应用于鼠标悬停到的元素。:active
应用于被激活的元素。:visited
应用于被访问过的链接,与:link
互斥。:focus
应用于拥有键盘输入焦点的元素。
CSS3
新增选择器,利用dom
树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class
和id
属性的定义,使文档结构更简洁。
div:first-child
选择属于其父元素的第一个子元素的每个div
元素。div:last-child
选择属于其父元素最后一个子元素的每个div
元素。div:nth-child(n)
选择属于其父元素的第n个子元素的每个div
元素。div:nth-last-child(n)
同上,从这个元素的最后一个子元素开始算。div:nth-of-type(n)
选择属于其父元素第n
个div
元素的每个div
元素。div:nth-last-of-type(n)
同上,但是从最后一个子元素开始计数。div:first-of-type
选择属于其父元素的首个div
元素的每个div
元素。div:last-of-type
选择属于其父元素的最后div
元素的每个div
元素。div:only-child
选择属于其父元素的唯一子元素的每个div
元素。div:only-of-type
选择属于其父元素唯一的div
元素的每个div
元素。:empty
选择的元素里面没有任何内容。:checked
匹配被选中的input
元素,这个input
元素包括radio
和checkbox
。:default
匹配默认选中的元素,例如提交按钮总是表单的默认按钮。:disabled
匹配禁用的表单元素。:enabled
匹配没有设置disabled
属性的表单元素。:valid
匹配条件验证正确的表单元素。
用于创建一些不在文档树中的元素,并为其添加样式。实际上,伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的,但它本身是基于元素的抽象,并不存在于文档结构中。比如说,我们可以通过::before
来在一个元素前增加一些文本,并为这些文本添加样式。
CSS3
规范中要求使用单冒号:
用于CSS3
伪类,双冒号::
用于 CSS3
伪元素,目的是区分伪类和伪元素。
::first-letter
选择元素文本的第一个字。::first-line
选择元素文本的第一行。::before
在元素内容的最前面添加新内容。::after
在元素内容的最后面添加新内容。::selection
匹配用户被用户选中或者处于高亮状态的部分。::placeholder
匹配占位符的文本,只有元素设置了placeholder
属性时,该伪元素才能生效。
https://github.com/WindrunnerMax/EveryDay