选择器总结（转）

来源：互联网发布：ps aux grep nginx 编辑：程序博客网时间：2024/06/07 06:12

1、类选择器：

   Element.className { selectorRules }
    例如：
    div.note { font-size:14px; }
    .dream { font-size:14px; }

2、类型选择器
    Element { sRules }
    Element是Html中的Element节点对象。
    如：
    td { font-size:14px; width:120px; }
    a { text-decoration:none; }

3、Descendant Selectors(包含选择器)
   Element1 Element2 { sRules }
   选择所有被 Element1 包含的 Element2节点，注意中间是空格
   如：
   table td { font-size:14px; }
   div.sub a { font-size:14px; }

4、子对象选择器
    Element1 > Element2 { sRules }
    选择所有作为 Element1 子对象的 Element2
    例如：
    body > p { font-size:14px; }
   div ul>li p { font-size:14px; }

5、ID选择器
    #ID { sRules }
    以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符
   例如：
   #note { font-size:14px; width:120px;}

6、Attribute Selectors(属性选择器)
E [ attr ] { sRules }
选择具有 attr 属性的 E

    E [ attr = value ] { sRules }
    选择具有 attr 属性且属性值等于 value 的 E

    E [ attr ~= value ] { sRules }
    选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E 。这里的 value 不能包含空格。

    E [ attr |= value ] { sRules }
    选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E 。
    例如：
    h[title] { color: blue; }
    span[class=demo] { color: red; }
    div[speed="fast"][dorun="no"] { color: red; }
    a[rel~="copyright"] { color:black; }

7、Grouping  (分组选择器)
    E1 , E2 , E3 { sRules }
    选择符分组。将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。
    例如：
    .td1,div a,body { font-size:14px; }
    td,div,a { font-size:14px; }

8、Pseudo Selectors(伪类伪对象选择器)
    E : Pseudo-Classes { sRules }
    E : Pseudo-Elements { sRules }

    例如：
    div:first-letter { font-size:14px; }
    a.fly :hover { font-size:14px; color:red; }

9、Universal Selector 统配符选择器
    * { sRules }
    通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。假如通配选择符不是单一选择符中的唯一组成，“*”可以省略。
    例如：
    *[lang=fr] { font-size:14px; width:120px; }
    *.div { text-decoration:none; }

来源：http://zhouyou.jun.blog.163.com/blog/static/100992189201142631832478/

0 0