Sky Watch

CSS Selectors

, by MetroWind

CSS selectors

昨天做 blog 的文章首字突出显示，使劲看了一下 CSS 的 selector。Selector 分为 9 类

  1. Type selector, 就是地球人都会用的那种，h1, p 什么的都是。CSS3 里引入了 namespace，也算在 type selector 里。
  2. Universal selector, 就是传说中的通配符 *。
  3. Attribute selector, 我昨天才知道 CSS 里有这么强悍的东西。比如 p[attr=blah] 会选择 <p attr="blah">.  还有很多其他的用法。
  4. Descendant selector, 一个空格，地球人都用的，比如 h1 em 表示包含在 h1 中的 em.  个人认为 CSS3 中的叫法 descendant combinator 更为准确。
  5. Child selector, 一个大于号。貌似很少用。这个也是表示从属关系，和 descendant selector 的区别是 child 只选择直接的下级。比如 <div><p><span>aaa</span></p></div> 中的 span 可以被 div span 选择，但是不能被 div > span 选择。个人认为 CSS3 中的叫法 child combinator 更为准确。
  6. Class selector & ID selector
  7. Adjacent sibling selector, 一个加号。div + p, 选择紧跟在 div 后面的 p，并且这两个要有相同的父标签。个人认为 CSS3 中的叫法 adjacent sibling combinator 更为准确。在 CSS3 里还有一个和这个差不多的 general sibling combinator, 暂时还没搞明白怎么用。
  8. Pseudo-class.  很常用，我们用的最多的就是 a:visited, a:hover. 除了这个 a 系列以外，还有 :first-child 和 :lang.  CSS3 中的 pseudo-class 就多得让人发指了，随便说几个：:nth-child(), :nth-of-type(), :only-child ...
  9. Pseudo-element, 经常和 pseudo-class 混，包括 :first-line, :first-letter, :before 和 :after.  在 CSS3 里，为了和 pseudo-class 区分，pseudo-element 的符号变成了两个冒号。

Pseudo-class 和 Pseudo-element 的区别

其实很简单。Pseudo-class 的冒号可以想象成 which is.  Pseudo-element 的冒号（或两个冒号）可以想象成 's.  也就是说前者选择的是符合条件的冒号前面的东西，而后者选择的是冒号前面的东西的一部分。  感觉有点像面向对象的类包容和类继承~~

回到首字突出

在网上看到很多实现文章首字突出的方法，居然有很多是用 javascript 搞的... 其实完全用不着。我的方法是

:::CSS
.entry-content > p:first-child::first-letter
{
    background-color: #2e3735;
    float: left;
    margin: -0.2em 0 -0.2em -1.15em;
    padding: 0.2em 0 0.2em 0.15em;
    font-family: Arno, Palatino, Georgia, Times, serif;
    font-size: 3em;
    border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
}

Reference

  1. http://www.w3.org/TR/CSS21/selector.html
  2. http://www.w3.org/TR/css3-selectors/
  3. http://www.w3.org/TR/CSS21/conform.html