CSS 选择器

元素选择符

  • 通配选择符(Universal Selector):IE6不支持,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用。
  • 类型选择符(Type Selector):即所谓的元素选择符。
  • ID选择符(ID Selector)
  • 类选择符(Class Selector):IE6.0不支持多类选择符,多类选择符无关选择符顺序。

注意:类选择符和ID选择符区分大小写

属性选择符

  • E[attr]:选择具有某个属性的元素。
  • E[attr = “val”]:选择具有attr属性且属性值等于val的元素。这是一个完全串匹配。IE6不支持。
  • E[attr ~= “val”]:选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。这是一个子串匹配。IE6不支持。
  • E[attr ^= “val”]:选择具有attr属性且属性值以val开头的字符串的元素。这是一个子串匹配。IE6不支持。
  • E[attr $= “val”]:选择具有attr属性且属性值以val结尾的字符串的元素。这是一个子串匹配。IE6不支持。
  • E[attr *= “val”]:选择具有attr属性且属性值中包含子串val的字符串的元素。这是一个子串匹配。IE6不支持。
  • E[attr |= “val”]:选择具有attr属性且属性值为以val开头的元素。这是一个子串匹配。IE6不支持。

关系选择符

  • 后代选择符(E F):选择所有被E元素包含的F元素,无论嵌套关系有多深。
  • 子选择符(E > F):选择所有作为E元素的子元素F。与后代选择符不同的是,只能命中子辈(即第一层嵌套),不能命中孙辈。 IE6不支持。
  • 相邻兄弟选择符(E + F):选择紧贴在E元素之后F元素。与兄弟选择符不同的是,相邻选择符只会命中符合条件的相邻的兄弟元素。 IE6不支持。
  • 兄弟选择符(E ~ F):选择E元素后面的所有兄弟元素F。与相邻选择符不同的是,兄弟选择符会命中所有符合条件的兄弟元素,而不强制是紧邻的元素。 IE6不支持

伪元素选择符

伪元素能够在文档中插入假想的元素,从而得到某种效果。

CSS3将伪元素选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

所有伪元素都必须出现在该伪元素选择器的最后面。 例如:p:first-letter em 是不合法的。

  • :first-letter 设置首字母样式
  • :first-line 设置第一行的样式,只能应用与标记或段落等块级元素。
  • :before/:after 设置元素之前或之后插入的内容。用来和content属性一起使用,并且必须定义content属性。
  • ::selection 设置元素被选择时的样式,只能定义被选择时的background-color及color。

伪类选择符

伪类能够为指定元素添加幻想类,从而得到某种效果。