zoukankan      html  css  js  c++  java
  • 常用 CSS 选择器

    // css 读取顺序从右到左,符合要求的都会匹配
    // 通配符选择器 -- 选择所有元素
    *
    // 通配符选择器 -- 选择某个元素下的所有元素
    .demo *
    // 元素选择器
    html,body,p,div等等
    // 类选择器 -- 使用类选择器之前需要在html元素上定义类名
    .className
    // 类选择器还可以结合元素选择器 -- 匹配类同时匹配元素
    p.items
    // 多类选择器 -- 注意,有一个不存在将无法找到该元素 -- ie6不支持
    .important.items
    // id 选择器 -- 1.全局唯一 2.一个元素只能命名一个id
    #id
    // 后代选择器 -- 选择E元素的后代元素F(不管儿子还是孙子)
    E F
    // 子元素选择器 -- ie6不支持
    E > F
    // 相邻兄弟元素选择器 -- 同级目录且 E 后边紧邻的 F(不含 E)
    E + F
    // 通用兄弟选择器 -- CSS3增加,同级目录下 E 后边所有 F(不含 E) -- ie6不支持
    E ~ F
    // 群组选择器(逗号隔开不同规则)
    .first, .last
    
    // 所有父元素下第一个元素(以 body 作为根父节点)
    :first-child
    // 父元素下第一个且为 p 的元素
    p:first-child
    // 父元素下第二个且为 p 的元素
    p:nth-child(2)
    // 同上,从最后一个子元素开始计数
    p:nth-last-child(2)
    // 父元素最后一个且为 p 的元素
    p:last-child
    // 父元素下第二个 p 元素
    p:nth-of-type(2)
    // 同上,但是从最后一个子元素开始计数
    p:nth-last-of-type(2)
    // 父元素最后一个 p 元素
    p:last-of-type
    // 与子元素选择器组合 -- 只匹配 E 元素子目录下且最后位置为 p 的元素
    E > p:last-child
    // 与后代选择器组合 -- 匹配 E 元素子目录、子子目录里且最后位置为 p 的元素
    E p:last-child
    
    // 选择其 src 属性值以 "https" 开头的每个 <a> 元素
    a[src^="https"]
    // 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素
    a[src$=".pdf"]
    // 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素
    a[src*="abc"]
    

    参考:
    http://www.w3school.com.cn/cssref/css_selectors.ASP
    http://www.w3cplus.com/css3/basic-selectors
    https://www.zybuluo.com/Rico/note/19592
    http://blog.jayself.com/2014/04/26/css3_selectors/

  • 相关阅读:
    vim 插件之commentary
    vim-进入插入模式快捷键
    adb logcat 使用
    操作excel脚本练习
    python-openpyxl安装
    python-excel操作之xlrd
    adb-端口被占用解决办法(win)
    打不开微信分享的链接
    在BUG分支下创建分支,开发后合并到bus分支
    css缓存问题
  • 原文地址:https://www.cnblogs.com/36bian/p/7685935.html
Copyright © 2011-2022 走看看