• 【W3C】 CSS3选择器


    扔一些学习W3C时翻译的规范,以个人理解和总结为主,翻译为辅。

    原文地址:http://www.w3.org/TR/css3-selectors/

    一、基本概念
    node和element:element是XML中的概念,是xml的数据组成部分。node是对于tree的结构而言的,元素由结点组成。
    parent :父元素
    children:子元素(直接后代,不包括再往后的后代 = 。 =)
    slibings :兄弟元素
    the subjects of a selector:一个选择器所匹配到的document tree中的元素就是这个选择器的subjects
     
    二、Simple Selectors 简单选择器
    Attribute selectors 属性选择器
    [attr] 具有attr属性
    [attr=value] 属性值等于value
    [attr~=value] 属性值是一系列用空格隔开的值,其中有一个值等于value
    [attr|=value] 属性值等于value或者以value开头并紧跟‘-’字符
    [attr^=value] 属性值以value开头
    [attr$=value] 属性值包含value
    [attr*=value] 属性值以value结束
     
    - Pseudo-classes 伪类
    定义:伪类是被引入用来允许选择DOM树外的信息,或不能用其他简单选择器表达的信息。
    表现:单冒号加伪类名
    说明:所有简单选择器序列都可以使用伪类。有些伪类是互斥的,而有一些可以同时应用。伪类可以是动态的,当用户发生交互时元素可以得到或失去一个伪类。
    P.S. 通常来说,相对于简单选择器,在匹配相同的情况下,伪类具有更高的权重。
     
    - 结构伪类
    用于选择DOM树内的,但不能用其它简单选择器或选择符所表示的额外信息。
    当计算一个element在它的parent的children list中的序号时,独立文本和非节点元素不在计算范围内。该序号从1开始。
    :root 匹配文档的根元素,在HTML4中,恒为 HTML 元素
    :nth-child()
        eg:
            tr:nth-child(2n+1) /* 匹配奇数行 */
            tr:nth-child(10n-1) /* 第9、19、29……行 */
            tr:nth-child(2) /* 第2行 */
    :nth-of-type() 按slibings的元素名进行分组排序的序列
    :nth-last-child() :nth-last-type 倒序
    :first-child == :nth-child(1)
    :last-child == :nth-last-child(1)
    :first-of-type == :nth-of-type(1):nth-last-type(1)
    :last-of-type
    :only-child == :first-child:last-child
    :only-of-type == :first-of-type:last-of-type
    :empty 匹配没有children的元素,任何有长度的节点都不行
     
    - 否定伪类
    用来排除不需要的元素
    :not() 参数是一个简单选择器
     
    - 状态伪类
    用于交互
    :link  适用于没有被访问的链接
    :visited   已被访问过的链接
    :hover  鼠标移上去~  
    :active  鼠标按下的时候~
    :focus 获得焦点
    :checked 用于单选框、复选框
    :enabled
    :disaled 用于表单的状态嘛~
    :indeterminate 不确定性都出来了!薛定谔的猫的节奏么!牛逼!
     
    - 目标伪类
    匹配以URI中标识符为id的元素
     
    - 语言伪类
    如果文档语言规定了一个元素的自然语言是如何定义的,就可使用:lang(C)来匹配,可以让客户端根据文档的语言属性自动匹配
     :lang(C)中的C是语言代码,不能为空
     
    三、Combinators 关系选择器
    - 后代选择器    A B
    - 子选择器   A > B
    - 兄弟选择器
        A + B 只选择其后符合条件的一个兄弟元素
        A ~ B 选择其后多个兄弟元素
     
    四、Pseudo-elements 伪元素
    定义:伪元素是在document tree中无法用文档语言来定义的内容的抽象。比如一个元素的内容的第一行::first-line、第一个字母::first-letter,同时还允许用户访问在源文档中不存在的内容,比如::before,::after。
    表现:双冒号加伪元素名
    说明:一个选择器中只能出现一个伪元素,且它只能出现在表示这个选择器的subjects的简单选择器序列后面(在将来的版本中会允许使用多个伪元素)
     
    五、权重的计算
    • 计算ID选择器的数量 (= a)
    • 计算类、属性、伪类选择器的数量 (= b)
    • 计算类型选择器、伪元素的数量 (= c)
    • 忽略通用选择器
    • 否定伪类本身不被计算
    • 三个数字相连a-b-c组成的二进制数即为权重值  
    • 允许重复同一个选择器以提高权重
  • 相关阅读:
    super.getClass().getName()方法调用的返回
    外观模式(Façade Pattern)
    Framework 4.0 将何去何从
    SQL Server 2005 第一篇 引言
    抽象工厂模式(Abstract Factory)
    浅谈分页技术
    垃圾邮件
    读书时的软件开发梦
    写技术博客的一个原因应该是寂寞吧
    当下10大最热门的网站开发技术
  • 原文地址:https://www.cnblogs.com/misadancer/p/3531315.html
Copyright © 2020-2023  润新知