• CSS3选择器


    1、属性选择器

    [attribute]

    [target]

    选择所有带有target属性元素

    [attribute=value]

    [target=-blank]

    选择所有使用target="-blank"的元素

    [attribute^=value]

    a[src^="https"]

    选择每一个src属性的值以"https"开头的元素

    [attribute$=value]

    a[src$=".pdf"]

    选择每一个src属性的值以".pdf"结尾的元素

    [attribute*=value]

    a[src*="runoob"]

    选择每一个src属性的值包含子字符串"runoob"的元素

    [attribute~=value]

    a[class~="link"]

    选择class属性值中包含link的元素

    [attribute|=value]

    img[src|="link"]

    选择src属性值等于link或以link-开头的所有元素

    2、CSS伪类选择器

    :nth-child(n)

    p:nth-child(2)

    选择每个p元素是其父级的第二个子元素

    :nth-last-child(n)

    p:nth-last-child(2)

    选择每个p元素的是其父级的第二个子元素,从最后一个子项计数

    :nth-of-type(n)

    p:nth-of-type(2)

    选择每个p元素是其父级的第二个p元素

    :nth-last-of-type(n)

    p:nth-last-of-type(2)

    选择每个p元素的是其父级的第二个p元素,从最后一个子项计数

    :last-child

    p:last-child

    指定只有选择每个p元素是其父级的最后一个子级。

    :first-child

    p:first-child

    指定只有当<p>元素是其父级的第一个子级的样式

    :empty

    p:empty

    选择没有子元素的p标签元素

    :only-child

    p:only-child

    选择只有一个子元素的p标签元素

    3、CSS伪元素选择器

    :first-letter

    p:first-letter

    选择每一个<P>元素的第一个字母或者第一个汉字

    :first-line

    p:first-line

    选择每一个<P>元素的第一行

    :before

    p:before

    在每个<p>元素之前插入内容

    :after

    p:after

    在每个<p>元素之后插入内容

    :selection

    p:selection

    改变p标签中的默认效果,只能设置background、color属性

    4、基本选择器

      (1)通配符选择器

    *

    * {   }

    选择页面上的所有元素

    选择器 *

    .box* { }

    选择box元素下的所有元素

      (2)元素选择器

    E

    li {   }

    选择li元素

      (3)类名选择器

    .class

    .box {   }

    选择类名为box的元素

    E.class

    p.box {   }

    选择类名为box的p标签元素

      (4)ID选择器

    #ID

    #box {   }

    选择ID为box的元素

      (5)群组选择器

    selector1,selector2…….

    .left,.right {   }

    选择类名为left、right的元素

    5、层次选择器

      (1)后代选择器

    E  F

    ul li {   }

    选择ul标签元素下的所有li标签元素

           (2)子代选择器

    E>F

    ul>li {   }

    选择ul标签元素下的子元素li标签

      (3)相邻兄弟元素选择器

    E+F

    img+p {   }

    选择紧邻img标签的p标签元素

      (4)通用兄弟选择器

    E~F

    Img~p {   }

    选择img标签后的所有的p标签元素

    6、动态伪类选择器

      (1)锚点伪类

    :link

    a:link

    链接未访问的样式

    :visited

    a:visited

    链接已访问过的样式

    :hover

    a:hover

    鼠标悬浮在链接上的样式

    :active

    a:link

    鼠标选中链接时的样式

             (2)用户行为伪类

    :hover

    a:visited

    用户用鼠标划过对应的元素,但是未激活显示的样式

    :focus

    a:hover

    一个元素本身具备焦点(接受键盘、鼠标、form的输入等)之后,显示的样式

    :active

    a:link

    用户按下鼠标后,但是并未离开时候的样式

     7、UI元素状态伪类选择器

    :enabled

    a:visited

    对可用的文本框设置样式

    :disabled

    a:hover

    对不可用的文本框设置样式

    :checked

    a:link

    对选中的的复选框设置样式

     8、否定伪类选择器

    :not

    input:not([type="submit"]) {  }

    对form中除了类型为submit所有input设置样式

  • 相关阅读:
    MySQL 工具
    MySQL 5.1参数
    CentOS 6.2下二进制安装 MySQL 5.6
    Linux 下hosts文件详解
    CentOS 6.5下二进制安装 MySQL 5.6
    云计算之云数据库
    MySQL 卸载
    Linux dig
    CentOS6.5利用Docker部署ShowDoc
    Myeclipse6.5每次打开properties中文注释都会变成乱码
  • 原文地址:https://www.cnblogs.com/wangxue13/p/13532068.html
Copyright © 2020-2023  润新知