css3中的伪类选择器

时间 2019-11-17

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

原文原文链接

1、动态伪类

动态伪类，由于这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是咱们在连接中常看到的锚点伪类，如":link",":visited";另一种被称做用户行为伪类，如“:hover”,":active"和":focus"。先来看最多见的锚点伪类著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css3/pseudo-class-selector © w3cplus.com

动态伪类，由于这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是咱们在连接中常看到的锚点伪类，如":link",":visited";另一种被称做用户行为伪类，如“:hover”,":active"和":focus"。先来看最多见的锚点伪类css

            a:link {color:gray;}/*连接没有被访问时前景色为灰色*/
            a:visited{color:yellow;}/*连接被访问事后前景色为黄色*/
            a:hover{color:green;}/*鼠标悬浮在连接上时前景色为绿色*/
            a:active{color:blue;}/*鼠标点中激活连接那一下前景色为蓝色*

对于这四个锚点伪类的设置，有一点须要特别注意，那就是他们的前后顺序，要让他们遵照一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active。若是你把顺序搞错了会给你带来意想不到的错误，你们对于这个应该很熟悉的，若是是初学的朋友，能够私下练习一下。其中:hover和:active又同时被列入到用户行为伪类中，他们所表达的意思是：

    :hover用于当用户把鼠标移动到元素上面时的效果；
    :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动做也就完成了）
    :focus用于元素成为焦点，这个常常用在表单元素上。
对于:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。著做权归做者全部。css3

2、UI元素状态伪类

咱们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操做，最多见的好比咱们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，好比说你想将"disabled"的文本框与别的文本框区别出来，你就能够这样应用网站

  input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

这样一来就把页面中禁用的文本框应用了一个不一样的样式。那么对于其余几个用法是同样的，这里就不在讲述。spa

IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

code

3、CSS3的:nth选择器

CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面咱们经过实际的应用来具体了解他们的使用和区别，首先列出他具备的选择方法：

    :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选择的元素里面没有任何内容。

详细请查看：https://www.w3cplus.com/css3/pseudo-class-selectororm

对于这四个锚点伪类的设置，有一点须要特别注意，那就是他们的前后顺序，要让他们遵照一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active。若是你把顺序搞错了会给你带来意想不到的错误，你们对于这个应该很熟悉的，若是是初学的朋友，能够私下练习一下。其中:hover和:active又同时被列入到用户行为伪类中，他们所表达的意思是：blog

:hover用于当用户把鼠标移动到元素上面时的效果；
:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动做也就完成了）
:focus用于元素成为焦点，这个常常用在表单元素上。