CSS学习笔记----选择器与字体（字系）

部分来自456bereastreet

an overview of the syntax for all CSS 2.1 selectors (based on the table in CSS 2.1, 5.1 Pattern matching):

Overview of CSS 2.1 selector syntax

Selector type	Pattern	Description
Universal	*	Matches any element.
Type	E	Matches any E element.
Class	.info	Matches any element whose class attribute contains the value info.
ID	#footer	Matches any element with an id equal to footer.
Descendant	E F	Matches any F element that is a descendant of an E element.
Child	E > F	Matches any F element that is a child of an E element.
Adjacent	E + F	Matches any F element immediately preceded by a sibling element E.
Attribute	E[att]	Matches any E element that has an att attribute, regardless of its value.
Attribute	E[att=val]	Matches any E element whose att attribute value is exactly equal to val.
Attribute	E[att~=val]	Matches any E element whose att attribute value is a list of space-separated values, one of which is exactly equal to val.
Attribute	E[att|=val]	Matches any E element whose att attribute has a hyphen-separated list of values beginning with val.
The :first-child pseudo-class	E:first-child	Matches element E when E is the first child of its parent.
The link pseudo-classes	E:link E:visited	Matches not yet visited (:link) or already visited (:visited) links.
The dynamic pseudo-classes	E:active E:hover E:focus	Matches E during certain user actions.
The :language pseudo-class	E:lang(c)	Matches elements of type E that are in language c.
The :first-line pseudo-element	E:first-line	Matches the contents of the first formatted line of element E.
The :first-letter pseudo-element	E:first-letter	Matches the first letter of element E.
The :before and :after pseudo-elements	E:before E:after	Used to insert generated content before or after an element’s content.

I’ll explain each of these selector types in more detail in this two part article, so keep reading. A few terms used in that table and in the rest of this article may need some clarification:

descendant

An element that is the child, grandchild or later descendant of an element in the document tree.

ancestor

An element that is the parent, grandparent or earlier ancestor of an element in the document tree.

child

The direct descendant of an element. No other elements may come between the two in the document tree.

parent

The direct ancestor of an element. No other element may come between the two in the document tree.

sibling

An element that has the same parent as the current element.

元素也可以基于它们的类而被选择：

td.fancy {
	color: #f60;
	background: #666;
	}

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

You can assign multiple class names to an element – the class attribute can hold a space separated list of class names. Class selectors can then be used to target only elements which have several class names. This rule will match p elements which haveboth “info” and “error” in their list of class names:

1. p.info.error { color:#900; font-weight:bold; }

Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):

1. blockquote[class=quote][cite] { color:#f00; }

An element may match several pseudo-classes at the same time. An element could have focus and be hovered over, for instance:

1. input[type=button]:focus {
2. color:#000;
3. background:#ffe;
4. }
5. input[type=text]:focus:hover {
6. background:#fff;
7. }

The first rule will match single line input elements that have focus, and the second rule will match the same elements when they are also hovered over.

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

Each of the selectors that form a descendant selector can be a simple selector of any form. The selector in the following rule matches all p elements with a class name of infothat are contained by an li element that is contained by a div element with the id myid.

1. div#myid li p.info { color:#f00; }

The mistake many make is to not list the full selectors. Assume that you have the following markup:

1. <div id="news">
2. <h3>News</h3>
3. <ul>
4. <li>Item 1</li>
5. <li>Item 2</li>
6. </ul>
7. </div>

Now, say you want to apply the same amount of margin to level 3 headings and unordered lists, but only if they are in the div element whose id is “news”. Here is thewrong way:

1. div#news h3, ul {
2. margin:0 2em;
3. }

This will affect both h3 and ul elements in div#news. The problem is that it will targetall ul elements in the document, not only those in div#news.

Here is the correct way of grouping the selectors in this case:

1. div#news h3,
2. div#news ul {
3. margin:0 2em;
4. }

So, when grouping selectors, remember to fully specify each selector.

关于!important

#box {
         color:red !important;
         color:blue;
  }

HTML

<div id="Box"> 在不同的浏览器下，这行字的色应该不同！</div>

这个例子应该是大家经常见到的important的用法了，在IE6环境下，这行字是蓝色，在IE7及firefox下，为红色。这是因为IE6不认important（即不认 !importmant 但是还是认!important前面的color:red)，并且color:blue放在color:red的后面(后面的css定义覆盖了前面的color:red)，所以在IE6下字为蓝色；而在IE7及firefox下important级别优先，所以color:red !important;和color:blue;的前后顺序没有关系，在IE7及firefox下red跟blue谁先谁后都没有关系。

我们所认为的“字体”可能有许多字体变形组成，分别用来描述粗体、斜体文本，等等。例如，你可能已经对字体 Times 很熟悉。不过，Times 实际上是多种变形的一个组合，包括 TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldItalic、TimesBoldOblique，等等。Times 的每种变形都是一个具体的字体风格（font face），而我们通常认为的 Times 是所有这些变形字体的一个组合。换句话说，Times 实际上是一个字体系列（font family），而不只是单个的字体，尽管我们大多数人都认为字体就是某一种字体。

除了各种特定字体系列外（如 Times、Verdana、Helvetica 或 Arial），CSS 还定义了 5 种通用字体系列：

Serif 字体

衬线字体，比较常见的衬线字体有 Georgia, Garamond, Times New Roman, 中文的宋体等等。衬线字体的可读性非常好，所以它应用的最多的地方也正是出版物或者印刷品的正文内容等以大段文字作为表现形式的作品 上.只要满足末端加强原则的字体都是衬线字体。所谓的末端加强，就是使用衬线或粗细变化，使字体笔画的末端得到加强，以改善小号文字的可读性。

Sans-serif 字体

非衬线字体（sans为“法语”中没有的意思），常见的无i衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等，无衬线字体比较圆滑，线条一般粗细均匀。比较适合用作艺术字、标题等。 因为无衬线字体通常粗细比较均匀，所以在小字体显示的时候，可读性会降低，容易引起视觉疲劳。

Monospace 字体

Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。

Cursive 字体

这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。

Fantasy 字体

这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。

看了这些，终于知道Chrome的字体设置里面那么多选项是什么意思了，哈哈!