zoukankan      html  css  js  c++  java
  • css3选择器笔记

    css3选择器
        
    element,element        div,p            选择p元素和div元素
    element element        div p            选择div内的所以p元素
    element>element        div>p            选择父元素是div的p元素
    element+element        div+p            选择紧接在div元素之后的所有p元素

    [attribute]        [type]            选择含有type属性的元素
    [attribute=value]    [type=button]        选择属性type为button的元素
    [attribute~=value]    [class~=flower]        选择属性包含的flower单词的元素
    [attribute^=value]    [class^=flo]        选择属性以flo字母开头的元素
    [attribute$=value]    [class$=wer]        选择属性以wer字母结尾的元素
    [attribute*=value]    [class*=owe]        选择舒心包含owe字母的元素

    :link            a:link              选择未访问链接
    :visited        a:visited          选择已访问链接
    :active            a:active          选择激活中链接
    :hover            a:hover             选择盘旋中链接
    :focus            input:focus        选择聚焦的表单
    :before            p:before        定位元素内容前
    :after            p:after            定位元素内容后

    :first-letter        p:first-letter        选择p元素的第一个字母    
    :first-line        p:first-line        选择p元素的第一行
    :first-child        p:first-child        选择是第一个儿子的p元素
    :last-child        p:last-child        选择是最后一个儿子的p元素
    :only-child        p:only-child        选择是唯一儿子的p元素
    :nth-child(n)        p:nth-child(3)        选择是第三儿子的p元素
    :nth-last-child(n)    p:nth-last-child(3)    选择是倒数第三儿子的p元素

    :first-of-type        p:first-of-type        选择在同类元素中排第一的p元素
    :last-of-type        p:last-of-type        选择在同类元素中排倒数第一的p元素
    :nth-of-type        p:nth-of-type(2)    选择在同类元素中排第二的p元素
    :nth-last-of-type    p:nth-of-type(2)    选择在同类元素中排倒数第二的p元素


    :empty            p:empty            选择没有子元素的p元素
    :enabled        input:enabled        选择启用了的表单元素
    :disabled        input:disabled        选泽禁用了的表单元素
    :checked        input:checked        选择被选中的表单元素
    :not(selector)        :not(p)            选择非p元素的元素
    ::selection        ::selection        选择被鼠标选取的区域

  • 相关阅读:
    [Python]爬虫v0.1
    [Python]同是新手的我,分享一些经验
    [python]闭包到底是什么鬼?
    测试Flask应用_学习笔记
    Flask模板_学习笔记
    SQL Server Alwayson概念总结
    JDBC数据库编程:ResultSet接口
    JDBC操作,执行数据库更新操作
    接口怎么实例化?
    java数据库编程:JDBC操作及数据库
  • 原文地址:https://www.cnblogs.com/demonxian3/p/6838279.html
Copyright © 2011-2022 走看看