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

    CSS3 选择器

    基础选择器

    • 通配符选择器 *
    • ID选择器 #Id
    • class选择器 .classname
    • 元素选择器 tagName
    • 群组选择器 slecter,selecter

    层次选择器

    • 后代选择器 selecter selecter
    • 子元素选择器 selcter>selecter
    • 相邻兄弟选择器 selecter+selecter同一父元素中,其后面的一个兄弟元素
    • 通配兄弟选择器 selecter~selecter同一父元素中,其后面的所有兄弟元素

    属性选择器

    • selecter[attr] 包含attr属性的元素
    • selecter[attr=val] arrt属性值是val的元素
    • seldcter[attr^=val] attr属性值是以val开头的元素
    • selecter[attr$=val] attr属性值是以val结束的元素呢
    • selecter[attr~=val] attr属性值val 或 包含val(两个值以空格隔开,其中一个是val)
    • selecter[*=val] attr属性值中包含val的元素
    • selecter[|=val] attr属性值是val或值是 val=*

    伪类选择器

    • 动态伪类选择器

      • :hover
      • :link
      • :visited
      • :active
      • :focus 获取焦点时,适用于输入框
    • 目标伪类选择器

      • E:target 匹配相关URL指向的E元素。
      • css样式 div:target{background:#999;}
      • html样式 <a href="#box01">01</a>
        <div id="box01"></div>
    • 语言伪类选择器

      • E:lang(fr)匹配使用特殊语言的E元素
    • UI元素伪类选择器

      • E:enabled
        • 匹配用户界面上处于可用状态的表单元素
      • E:diabled
        • 匹配用户界面上处于禁用状态的表单元素
      • E:checked
        • 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
    • 结构伪类选择器

      • :root 根元素选择器,在html中根元素永远是html
      • :first-child 匹配父元素的的一个子元素(所有兄弟元素中第一个)
      • :last-child 最后一个
      • nth-child(n) 第n个子元素
      • nth-last-child(n) 倒数第n个子元素
      • only-child 匹配父元素仅有的一个子元素
      • first-of-type 第一个此类型的
      • last-of-type 最后一个此类型的
      • nth-of-type() 第n个此类型的
      • nth-last-of-type() 倒数第n个此类型的
      • only-of-type() 只有一个此类型的
      • empty 匹配空的元素(不能有子元素也不能有内容)
    • 否定伪类选择器

      • not(selecter)匹配不含selecter选择的

    伪元素选择器

    • :first-letter / ::first-letter 第一个字母
    • :first-line / ::first-line 第一行
    • : before / ::before
    • : after / ::after
    • ::placeholder(设置对象文字占位符的样式)
    • ::selection(设置对象被选择时的样式)
  • 相关阅读:
    利用Python 统计txt 文档词频 次数
    Markdown工具Typora结合gitee码云图床自动上传云端图片
    主数据MDM下发eHR系统操作整理v1.0
    Python读取Excel数据生成图表 v2.0
    HTML基础(20200610)
    Python网络编程socket 简易聊天窗
    selenium-python-验证码-动态验证码
    selenium-python-验证码-滑动验证码
    Linux系统学习 20200506
    @Mapper @Insert 注解式方法批量入库(ORACLE数据库)
  • 原文地址:https://www.cnblogs.com/yan--li/p/7291639.html
Copyright © 2011-2022 走看看