css伪类选择器

时间 2019-11-09

标签 css 选择器栏目 CSS 繁體版

原文原文链接

咱们在写css的时候会常常使用伪类选择器，伪类选择器就是经过css选择器加上冒号和伪类名构成的。可能有些伪类选择器你已经见过了，好比说a:hover这样的选择器。css

在大多状况下，伪类选择器是很是有用的。其中css2 和css3 都支持伪类选择器，只是相对来讲，css2支持的可能比css3的少，除了ie浏览器外，其余大部分浏览器都支持伪类选择器，在ie浏览器中，包括ie8也是支持少许的伪类选择器的。ie9 及以上浏览器，基本上支持全部的伪类选择器，下面，让咱们看看全部的伪类选择器。固然，伪类选择器并无那么多。html

链接的伪类选择器

链接的伪类选择器包括如下几个（:link、:visited 、:hover 、:active）css3

:link 这个选择器也许是最容易引发混淆的一个链接的伪类选择器，不是全部的<a>都是链接么？可是并非这样的，这个伪类选择器只选择那些没有添加href属性的a标签的，这样看来这个伪类选择器是否是就和[href]这个选择器很类似。浏览器

:visited 这个选择器选择那些在当前浏览器中那些经过本a标签进入过的地址的标签。spa

:hover 这个就不用说了，这个你们用的很广的，这个伪类选择器选择那些经过鼠标悬停状态下的链接。htm

:active 这个伪类选择器选择那些，鼠标左键按下，可是未弹起状态下的标签。一样，这个伪类在h5中选择那些按钮按下的状态。事件

input标签和链接的伪类选择器

这个包括比较多，下面咱们来一一介绍。get

:focus 对于链接来讲:hover这个伪类是很是有用的，可是他不可以选择那些获取焦点状态下的元素（什么是获取焦点，获取焦点就是咱们可以经过键盘来进行操做，好比说，input，个人能够经过键盘输入，这种状态就是获取焦点的状态;按钮，咱们可以经过enter来触发事件这个状态就是咱们给按钮获取了焦点，对于a标签来讲，若是获取焦点了，咱们就可以经过enter来触发他的链接事件。）。所一说，:focus伪类是选择那些当前在焦点状态下的元素。input

:target target这个伪类选择器应该结合着标签的id进行使用，或者是与当前链接中的的hash进行匹配的id。hash

:enabled 这个选择那些可使用的input标签，其中可使用包括enabled和ready这两中属性的input标签。

:disabled 这个选择器选择那个有disabled属性的input标签，部分浏览器，会把input:disabled标签变成灰色，因此咱们在写css的时候须要控制浏览器的默认状态。

:checked 这个伪类选择器选择input[type="checkbox"],input[type="radio"]的选中状态。

:indeterminate 这个选择器选择radio按钮没有被选择而且加加载时候没有进行默认设置的状态。这个可能比较不太好理解。

位置、序号伪类选择器

:root 这个伪类选择器选择document的根节点，一般状况下，咱们的document的根节点就是<html>，可是也有一些状况下，有人会用html进行标记。这时候其选择的就不是<html>标签了。

:firsct-child 这个伪类用于选取属于其父元素的首个子元素的指定选择器。

:last-child 选择器匹配属于其父元素的最后一个子元素的每一个元素。

:nth-child(N) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 能够是数字、关键词或公式。

:nth-of-type() 选择器匹配属于父元素的特定类型的第 N 个子元素的每一个元素.n 能够是数字、关键词或公式。

:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每一个元素。

:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每一个元素。

:nth-last-child(n) 择器匹配属于其元素的第 N 个子元素的每一个元素，不论元素的类型，从最后一个子元素开始计数。n 能够是数字、关键词或公式。

:only-of-type 选择器匹配属于其父元素的特定类型的惟一子元素的每一个元素。

具体的能够经过下面这个图，看起来会比较直观点儿

关系伪类选择器

:not() 选择器匹配非指定元素/选择器的每一个元素。好比说input:not([disabled])选择可用的input标签。

:empty() 选择哪些内容为空的标签，好比说<p></p>

文字类的伪类选择器

::first-letter 这个选择元素内的第一汉字或者是字母。

::first-line 这个选择器选择那些元素内的第一行的内容。

上面就是经常使用的伪类选择器，可能还有一些没有被收录进来。

1. css--css选择器，伪类
2. css选择器-伪类选择器
3. css选择器2——伪类选择器
4. CSS伪类选择器
5. css伪类选择器
6. 5.CSS 伪类选择器
7. CSS 3 伪类选择器
8. CSS 伪类选择器
9. css 伪类选择器
10. 选择器、伪类、伪类选择器
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• XQuery 选择和过滤 - XQuery 教程
• Kotlin学习（二）基本类型
• Docker容器实战(七) - 容器眼光下的文件系统