Pro CSS Techniques 读书笔记（二）

http://www.ctba.cn/blog/entry/2222

子元素选择符

与后代选择符相似但只选择子元素，而不是所有祖先，以 > 为标记。

<ul>
   <li>我要猫头鹰</li>
   <li>一对儿猫头鹰
      <ol>
         <li>东东</li>
         <li>西西</li>
      <ol>
   </li>
</ul>

ul > li {
   color: orange
}

那么“东东”和“西西”就不会变为橙色

相邻选择符

为相邻元素单独设置风格

<h1>妈妈说</h1>
<p>你再不出手</p>
<p>家里的东西就都被砸坏了</p>

h1 + p {
   margin-top: 0
}

这样，h1 与第一个段落 p 间就没有了缺省的间隔；可能这个选择符在实际中作用并不大，但最好知道，或许日后在特定的场合用得上。

存在的特性

a[href][title] {
   color: orange
}

这段代码会选择所有具有 href 和 title 属性的锚点元素 <a>；同时我们还可以使用通配选择符 * 来选择某个特定属性的元素，比如：

*[src]

可以选择任何具有 src 值的元素，包括 img, embed 等等。

具体属性值

顾名思义，这种选择符精确匹配到某个属性值，包含空格，比如想让 title 为“扯谈社 CTBA”的链接看起来与其他链接不同：

<a href="http://ctba.cn/" title="扯谈社 CTBA">CTBA</a>

那么可以这样：

a[title="扯谈社 CTBA"] {
   color: blue
}

部分属性值

有具体就得有部分，这种匹配允许我们对局部文字进行选择，还是刚才的例子，如果我们这样写：

a[title="CTBA"] {
   color: blue
}

就不能匹配到扯谈社的链接，这时我们需要使用 ~= 来进行部分匹配：

a[title~="CTBA"] {
   color: blue
}

就这么简单，和类选择符有一样的效果，但这种选择符不仅局限于 class，也适用于其他特性。

特定属性选择符

一种更加强大的选择符，用来选择与给定文本精确匹配或以此开头的属性值，比如：

img[src|="news"] {
   padding: 2px;
   border: 1px solid #eee
}

这段代码选择的是任何以 news 开头的 src 值的图片；比如 src 为：

news/hoop.png, news/2008-12/ctba.png 或 news_ctba.png

的图片。但是不能匹配：

hoop_news.png, /news/ctba.png

伪类

最好的理解伪类的方式是锚点元素 <a>，a 的伪类包括 :link, :visited, :hover, :active (大家熟知的 LoVe/HAte)。除此之外 :hover 和 :focus 还可被用于其他元素，:hover 表示鼠标停在某一元素上时，:focus 状态在用户着重关注某个元素时被激活，一般用于表单域内，比如：

扯谈所有的 input 输入框都统一设置了 :focus 伪类

input {
   border: 1px solid #ddd;
   background: #f7f7f7
}
input:focus {
   border: 1px solid #f70;
   background: #fff
}

当用户的焦点在此 input 上时，输入框的边框和背景色将会改变以示意当前你的光标所在位置。其他标签同样适用：

tr:hover {
   background: #eee
}

伪元素

有时为段落的第一行或标题首字设计独特的样式是非常有用的，这时你需要使用伪元素：

p:first-line {
   font-weight: bold
}
h1:first-letter {
   font-size: 18px
}

这个 letter 不仅限于英文，也适用于一个中文字符

除此之外还有 :before 和 :after 两个虚类，他们可以在某个特定元素之前或之后插入内容。比如在每个 li 元素后插入一条分割线 | 等等。

非常可惜的是，以上提到的选择符，ie6 及 以下版本并不适用，所以在使用时局限性比较大；不过还好，日渐普及的 ie7 已经对高级选择符有了很好的支持。边吃面边犯困，今起早了 -  - 明天的主题是优先级和级联，睡去～