Sky Watch

CSS Selectors

By mw @

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] 会选择

    .  还有很多其他的用法。

  4. Descendant selector, 一个空格，地球人都用的，比如 h1 em 表示包含在 h1 中的 em.  个人认为 CSS3 中的叫法 descendant combinator 更为准确。

  5. Child selector, 一个大于号。貌似很少用。这个也是表示从属关系，和 descendant selector 的区别是 child 只选择直接的下级。比如

    aaa

    中的 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 的符号变成了两个冒号。

    10. 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