zoukankan      html  css  js  c++  java
  • HTML5--(2)属性选择器+结构性伪类+伪类

    一.属性选择器

    • [att] 匹配所有具有att属性的
    • [att=val] 匹配所有att属性等于“val”的
    • [att~=val] 匹配所有att属性包含“val”或者等于“val”的(val必须是一个完整词)
    • [att|=val] 匹配所有att属性仅仅只等于以val-’ 开头的或等于“val”(比如说zh-cn)
    • [att*=val] 匹配所有att属性 包含’val’的字母 (val可以是字母) 类似模糊查询
    • [att^=val] 匹配所有att属性 ‘val’开头的 (val可以是字母)
    • [att$=val] 匹配所有att属性 ‘val’结束的 (val可以是字母)

    二.结构性伪类

      • E:nth-child(n) 表示E父级的所有子元素集合中的,第n个子节点(从前往后数 兄弟同类型标签 不可跨越其他类型标签  按所有标签索引顺序去选择)
      • E:nth-last-child(n) 表示E父级的所有子元素集合中的,第n个子节点,从后向前计算 (从后往前数)
        (需E选择器能选中此元素)
      • E:nth-of-type(n) 表示E元素父级的子元素是E集合,第n个字节点,(兄弟同类型标签 可跨越其他类型标签 按同类型标签索引顺序去选择)
      • E:nth-last-of-type(n) 表示E父级的第n个字节点,从后向前计算 
        (需E选择器能选中此元素,且区分标签类型)
      • E:nth-child(odd) 匹配奇数行 同p:nth-child(2n-1)
      • E:nth-child(even) 匹配偶数行 同p:nth-child(2n)
      • E:empty 表示E元素中没有子节点(不能有空格,回车)。注意:子节点包含文本节点

    三.伪类

    • E:target 当a标签获取焦点href=”所对应的 E元素锚点的对象(超链接跳转对象)
    • E:disabled 表示不可点击的表单控件disabled(禁止选中)
    • E:enabled 表示可点击的表单控件
    • E:checked 表示已选中的checkbox或radio (鼠标点击时)
    • E:first-line 表示E元素中的第一行
    • E:first-letter 表示E元素中的第一个字符(首字)
    • E::selection 表示E元素在用户选中文字时
    • E:not(selector) 选择非 selector 选择器的每个元素。
    • E~F 表示E元素后的所有兄弟F元素(~不需要紧挨着  +需要紧挨着 毗邻)

      其他属性 input::placeholder  改变文本框中提示字体样式

      兼容写法input::-webkit-input-placeholder

  • 相关阅读:
    峰哥说技术:14-Spring Boot异常处理方案源码解析与实践
    峰哥说技术:13-Spring Boot ControllerAdvice处理全局异常
    峰哥说技术:12-Spring Boot文件上传
    峰哥说技术:11-Spring Boot返回JSON
    Vant+小程序+购物车实例
    Element-ui框架Tree树形控件切换高亮显示选中效果
    Element-ui框架checkbox复选框回显
    Vue+Element-ui+DateTimePicker 日期时间选择器传值给后台
    Vue+Element+Select获取选中的对象
    Vue+Element+computed实现购物车
  • 原文地址:https://www.cnblogs.com/huyadan/p/8205919.html
Copyright © 2011-2022 走看看