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        选择被鼠标选取的区域

  • 相关阅读:
    webpack 3.X学习之CSS处理
    webpack 3.X学习之图片处理
    webpack 3.X学习之基本配置
    webpack 3.X学习之JS压缩与打包HTML文件
    webpack 3.X学习之初始构建
    【复习】VueJS之内部指令
    前端学习记录之Javascript-DOM
    javascript常用的Math对象的方法
    nodejs+mongoose+websocket搭建xxx聊天室
    Markdown常用语法
  • 原文地址:https://www.cnblogs.com/demonxian3/p/6838279.html
Copyright © 2011-2022 走看看