HTML5选择器

CSS选择器回顾

  • ID选择器
  • 类名选择器:多类(.class1.class2)不被ie6支持
  • 标签(元素)选择器
  • 组合(后代)选择器
  • 通配符选择器
  • 直接子元素选择器 >ie6不支持
  • 相邻兄弟选择器 +ie6不支持
  • 属性选择器
  • 伪元素选择器
    enter image description here
  • 伪类选择器
    enter image description here

CSS新增选择器

  1. 通用兄弟(关联)选择器:~,选择后面的所有的子元素
  2. 属性选择器(新增的):
    • E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写;
    • E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
    • E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
    • E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
    • E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);
    • 注意:IE6不支持所有的属性选择器
  3. :nth选择器

    • :first-child 选择某个元素的第一个子元素;
    • :last-child 选择某个元素的最后一个子元素;
    • :nth-child() 选择某个元素的一个或多个特定的子元素;

       :nth-child(length);/*参数是具体数字*/
      :nth-child(n);/*参数是n,n从0开始计算*/
      :nth-child(n*length)/*n的倍数选择,n从0开始算*/
      :nth-child(n+length);/*选择大于length后面的元素*/
      :nth-child(-n+length)/*选择小于length前面的元素*/
      :nth-child(n*length+1);/*表示隔几选一*/
      //上面length为整数
      
    • :nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;

      其实这种使用和:nth-child使用是一样的,也可以使用:nth-child的那些表达式和使用方法,唯一不同的是这种指定了元素的类型而以。
      
    • :nth-of-type() 选择指定的元素;

    • :nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算;
    • :first-of-type 选择一个上级元素下的第一个同类子元素;
    • :last-of-type 选择一个上级元素的最后一个同类子元素;
    • :only-child 选择的元素是它的父元素的唯一一个了元素;
    • :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素
    • :empty 选择的元素里面没有任何内容
    • :not 否定选择器
  4. UI元素状态伪类
    我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类,这些主要是针对于HTML中的Form元素操作,最常见的比如我们“type=”text”有enable和disabled两种状态,前者为可写状态后者为不可状态;另外“type=”radio”“type=”checkbox”有”checked”和”unchecked”两种状态。来看两个实例,比如说你想将”disabled”的文本框与别的文本框区别出来,你就可以这样应用

    input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
    

注意:IE6-8不支持":checked",":enabled",":disabled"这三种选择器。著作权归作者所有。

  1. 伪元素新增
  • ::selection 选择被用户选中的input:注意是选中,不是获得焦点
文章作者: 踏浪
文章链接: https://www.lyt007.cn/技术/HTML5选择器.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 踏浪
支付宝
微信打赏