CSS选择器总结

Published on 2015-02-02
  • 元素选择器(类型选择器)

    p {} 所有的p元素

  • 选择器分组

    h2, p {} 所有的h2元素和p元素,不分层级

  • 通配符选择器

    * {} 所有元素

  • 类选择器

    • .imp {} 所有class为imp的元素
    • p.imp {} 所有class为imp的p元素
    • .imp.warning {}所有class同时包含imp和warning的元素,注意.imp.warning中间没有空格
  • ID选择器

    #imp {} id为imp的元素(正常情况下一个id在文档中只应该出现一次)

  • 属性选择器

    • *[title] {} 所有拥有title属性的元素
    • a[href] {} 所有拥有href属性的a元素
    • a[href][title] {} 所有同时拥有href和title属性的a元素
    • a[href="http://wiki.moonshile.com"] {} 所有拥有href属性为http://wiki.moonshile.com 的a元素,要求属性值完全匹配
    • a[href="http://wiki.moonshile.com"][title="wiki"] {} 所有href属性为http://wiki.moonshile.com 并且title属性为wiki的a元素
    • a[title~="wiki"] {} 所有title属性值中包含wiki的a元素,注意这个“包含”是指包含这个单词,而不是包含这个字符串,例如<a title="wikipedia"></a>不会被选中的
    • a[title^="wiki"] {} 所有title属性以wiki开头的a元素(按字符串匹配,下边两个也是)
    • a[title$="wiki"] {} 所有title属性以wiki结尾的a元素
    • a[title*="wiki"] {} 所有title属性包含wiki字符串的a元素
    • a[title|="wiki"] {} 所有title属性值为wiki或者以wiki-开头的a元素
  • 后代选择器

    后代选择器是把以上各种选择器以空格分隔开来,用以表示在前边一项的后代中寻找符合后边一项的元素,注意这里的后代是严格的后代关系,即一个元素的后代不包含该元素自身

    • div p {} 所有位于某个div中的p元素
    • div .imp {} 所有位于某个div中的拥有class属性imp的元素
    • .imp p {} 所有位于某个拥有class属性imp的元素中的p元素
  • 子元素选择器

    类似与后代选择器,但是只选择直接后代,也就是儿子元素。

    h1 > strong {} 所有以h1为父亲(而非祖先)的strong元素,也就是说,h1的孙辈或者更低的后代中的strong元素是不会被选中的

  • 相邻兄弟选择器

    选择与某个元素相邻的下一个兄弟元素。

    • h1 + p {} 所有紧接着出现在h1元素后边的p元素,注意h1元素不会被选中
    • p + p {} 所有连续出现的p元素,但不包含他们中的第一个
  • 伪类选择器

    • a:link {} 所有未被访问的链接
    • a:visited {} 所有已经访问的链接
    • a:hover {} 鼠标移动到链接上
    • a:active {} 选定的链接(如用tab键选中)
    • a:focus {} 获得焦点
    • a:first-child {} 作为某元素第一个子元素的a元素(不是a元素的第一个子元素)
    • 此外还有lang伪类,用的不多,不解释了

    需要注意的是,link或者visited必须在hover之前,active必须在hover之后,才是有效的。

  • 伪元素选择器

    • p:fist-letter {} 文本的首字母,只能用于块级元素
    • p:first-line {} 文本的首行,只能用于块级元素,不会覆盖first-letter伪元素
    • p:before {content: url(...)} 在p元素内容的前面插入新内容
    • p:after {content: "abc"} 在p元素内容的后面插入新内容

    :在CSS3中,伪元素是用双冒号定义的,如p::after