zoukankan      html  css  js  c++  java
  • CSS伪类

    1).动态伪类

    • :link        /*链接没有被访问时/
    • :visited   /*链接被访问过后*/
    • :hover    /*鼠标悬浮在链接上时*/
    • :active    /*鼠标点中激活链接那一下*/
    • :focus    /*用于元素成为焦点*/

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

    2).状态伪类

    • :enabled
    • :disabled
    • :checked

    我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类,这些主要是针对于HTML中的Form元素操作

    3).CSS3的:nth选择器

    :nth序号选择器有以下:

    • :first-child选择某个元素的第一个子元素;
    • :last-child选择某个元素的最后一个子元素;
    • :nth-child()选择某个元素的一个或多个特定的子元素;
    • :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
    • :first-of-type选择一个上级元素下的第一个同类子元素;
    • :last-of-type选择一个上级元素的最后一个同类子元素;
    • :nth-of-type()选择指定的元素;
    • :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
    • :only-child选择的元素是它的父元素的唯一一个了元素;
    • :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;

    1):first-child和:last-child

    a:first-child{}
    a:last-child{}

    2):nth-child()和:nth-last-child()

    //下面的length为整数,n从0开始不断增加1(n=1、2、3、4、5...)
    :nth-child(length);          /*参数是具体数字*/
    :nth-child(n);               /*全部*/
    :nth-child(2n)               /*2的倍数-偶数*/
    :nth-child(2n+1);            /*2的倍数加一-奇数*/
    :nth-child(n+length)         /*length加n,n一定要放在前面,包含lengtn,因为n从0开始*/
    :nth-child(-n+length);       /*length减n,n一定要放在前面,包含length,因为n从0开始*/
    :nth-child(-3n+10)           /*10减3的倍数,n一定要放在前面,包含length,因为n从0开始*/

    :nth-last-child()就是:nth-child()从最后往前数

    3):nth-of-type()和:nth-last-of-type()

    类似于:nth-child和:nth-last-child,但是这个是相对在同一种元素计算的,在兄弟元素中同种元素的第几个

    4):first-of-type和:last-of-type

    类似于:first-child和:last-child,但是这个是相对在同一种元素计算的,在兄弟元素中同种元素的第一个和最后一个

    5):only-child和:only-of-type

    分表表示只有一个子元素和同一种元素只有一个

    6):not和:empty

    否定选择器和jq中的:not选择器一模一样,就拿form中的元素来说明这个选择器的用法,比如你想对form中所有input加边框,但又不想submit也起变化,此时就可以使用:not为实现

    :not(selector)

    div:not(.className){color:red}

    :empty

    :empty是用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格

  • 相关阅读:
    20145222GDB调试汇编堆栈过程分析
    实验二-固件设计 20145213祁玮 20145222黄亚奇
    VS2015下如何用编译、调试程序。
    20145222《信息安全系统设计基础》第11周学习总结
    第八章教材内容总结:异常控制流
    20145222《信息安全系统设计基础》第十周学习总结
    who命令的总结
    20145222《信息安全系统设计基础》第九周学习总结
    《信息安全系统设计基础》实验过程中遇到的问题以及解决方案
    Selenium学习笔记||十四、浏览器页面刷新、前进、后退
  • 原文地址:https://www.cnblogs.com/amiezhang/p/10902406.html
Copyright © 2011-2022 走看看