• 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设置样式

  • 相关阅读:
    面向对象---2
    面向对象---1
    数组的复制、反转、查找(线性查找,二分法查找)
    Oracle 开放端口供客户机连接
    ORACLE常用函数大全
    ORACLE常用脚本
    C#开发实用知识点总结
    线程对话框基类
    C#开发常见问题处理
    通过修改注册表实现IE设置
  • 原文地址:https://www.cnblogs.com/chengxiao35/p/13532241.html
Copyright © 2020-2023  润新知