6 |
7 | ## 前言
8 |
9 | 在不知干了多久的 Android 开发和 Java 后端开发后，由于公司需要，开始转行 Web 前端方向。在系统化学习前端知识时候，无奈发现市面上只有《CSS 权威指南（第三版）》的中文版（2007 年 10 月第一版）。众所周知，CSS 的标准发展日新月异，本书的第一章写于 2012 年，现在来看部分内容已经稍有落后，而等到第四版的中文版引入国内时，又不知何年何月了。遂决定阅读英文版，此 repo 仅为个人参考翻译。
10 |
11 | 英文正式版已于 2017 年 10 月正式出版。
12 |
13 | ## Index
14 |
15 | - [第 1 章 CSS 和 Documents](docs/ch1.md)
16 | - [第 2 章 选择器](docs/ch2.md)
17 | - [第 3 章 特异性和级联](docs/ch3.md)
18 | - [第 4 章 值和单位](docs/ch4.md)
19 | - [第 5 章 字体](docs/ch5.md)
20 | - [第 6 章 文本属性](docs/ch6.md)
21 | - [第 7 章 基本的视觉格式化](docs/ch7.md)
22 | - [第 8 章 Padding, Borders, Outlines 和 Margins](docs/ch8.md)
23 | - [第 9 章 颜色、背景和渐变](docs/ch9.md)
24 | - [第 10 章 浮动和形状](docs/ch10.md)
25 | - [第 11 章 定位](docs/ch11.md)
26 | - [第 12 章 灵活的框布局](docs/ch12.md)
27 | - [第 13 章 网格布局](docs/ch13.md)
28 | - [第 14 章 CSS 中的表格布局](docs/ch14.md)
29 | - [第 15 章 列表和生成的内容](docs/ch15.md)
30 | - [第 16 章 转换 ](docs/ch16.md)
31 | - [第 17 章 跃迁](docs/ch17.md)
32 | - [第 18 章 动画](docs/ch18.md)
33 | - [第 19 章 过滤器，混合，剪切和掩蔽](docs/ch19.md)
34 | - [第 20 章 Media-Dependent 风格](docs/ch20.md)
35 |
36 | ## 本地开发 & 阅读
37 |
38 | 本项目基于 vuepress 进行开发，以提供比 github mardown 更佳的阅读体验
39 | 依赖于 `node.js`、`yarn`、`vuepress` 等环境
40 |
41 | ```sh
42 | # node
43 | node -v
44 | > v10.14.1
45 | # yarn
46 | yarn -v
47 | > 1.13.0
48 | # vuepress
49 | yarn global add vuepress
50 |
51 | # 本地开发
52 | git clone https://github.com/gdut-yy/CSS-The-Definitive-Guide-4th-zh.git
53 | cd CSS-The-Definitive-Guide-4th-zh
54 | yarn docs:dev
55 |
56 | # 本地阅读
57 | http://localhost:8080/
58 | ```
59 |
60 | ## Contributors
61 |
62 | 
61 | ```
62 |
63 | This markup fragment contains only an element name and an attribute. The element presents nothing unless you point it to some external content (in this case, an image specified by the src attribute). If you point to a valid image file, the image will be placed in the document. If not, it will either display nothing or the browser will show a “broken image” placeholder.
64 |
65 | 这个标记片段只包含一个元素名和一个属性。元素不会显示任何内容，除非您将其指向某些外部内容(在本例中，是由 src 属性指定的图像)。如果您指向一个有效的图像文件，则图像将被放置在文档中。如果没有，它将不显示任何内容，或者浏览器将显示一个“损坏的图像”占位符。
66 |
67 | Similarly, the input element is also replaced—by a radio button, checkbox, or text input box, depending on its type.
68 |
69 | 类似地，input 元素也可以替换为单选按钮、复选框或文本输入框，这取决于它的类型。
70 |
71 | #### 非替换元素 Nonreplaced elements
72 |
73 | The majority of HTML elements are nonreplaced elements. This means that their content is presented by the user agent (generally a browser) inside a box generated by the element itself. For example, `
87 | 
110 | 
130 | 
295 | 
418 | When handling plutonium, care must be taken to avoid the formation of a critical mass.
497 |498 | With plutonium, 499 | the possibility of implosion is very real, and must be avoided at all costs. This can be 500 | accomplished by keeping the various masses separate. 501 |
502 | ``` 503 | 504 | To associate the styles of a class selector with an element, you must assign a `class` attribute the appropriate value. In the previous code block, a `class` value of `warning` was assigned to two elements: the first paragraph and the `span` element in the second paragraph. 505 | 506 | 要把类选择器和一个元素联系起来，必须为`class`属性设置一个合适的值。在上面的代码中，一个值为`warning`的类被分配给两个元素：第一个段落和第二个段落里的`span`元素。 507 | 508 | All you need now is a way to apply styles to these classed elements. In HTML documents, you can use a compact notation where the name of a `class` is preceded by a period (.) and can be joined with an element selector: 509 | 510 | 现在只需要一种方式把样式应用在这些元素上。在 HTML 文档中，可同`class`名称紧跟一个句点（.），并且可以与元素选择器一起使用： 511 | 512 | ```css 513 | .warning { 514 | font-weight: bold; 515 | } 516 | ``` 517 | 518 | When combined with the example markup shown earlier, this simple rule has the effect shown in Figure 2-6. That is, the declaration font-weight: bold will be applied to every element (thanks to the presence of the implicit universal selector) that carries a class attribute with a value of warning. 519 | 520 | 与前面所示的示例标记集合使用，这个简单规则的效果如图 2-6 所示。亦即，声明`font-weight: bold`会应用在每个（得益于隐含的通配选择器）`class`属性值为`warning`的元素上。 521 | 522 | _**通配选择器的符号是`*`，使用 ID、类、属性选择器、伪类选择器以及伪元素选择器等时，如果没有结合元素选择器，它们会隐式地包含通配选择器。**_ 523 | 524 |
525 | 
526 |
527 |
526 | 图 2-6：使用类选择器
528 | 529 | As you can see, the class selector works by directly referencing a value that will be found in the class attribute of an element. This reference is always preceded by a period (.), which marks it as a class selector. The period helps keep the class selector separate from anything with which it might be combined—such as an element selector. For example, you may want boldface text only when an entire paragraph is a warning: 530 | 531 | 如你所见，类选择器直接通过元素`class`属性中的值来引用元素。引用始终以句点（.）开头，标记它是一个**类选择器**。句点把类选择器和与其组合在一起的其他部分区分开来（例如元素选择器）。假如当只有整个段落是警告时，才设置为粗体： 532 | 533 | ```css 534 | p.warning { 535 | font-weight: bold; 536 | } 537 | ``` 538 | 539 | The selector now matches any p elements that have a class attribute containing the word warning, but no other elements of any kind, classed or otherwise. Since the span element is not a paragraph, the rule’s selector doesn’t match it, and it won’t be displayed using boldfaced text. 540 | 541 | 选择器现在只会匹配任何`class`属性值中包含单词`warning`的`p`元素，而其他类型的元素无论有没有设置`class`值都不会被选中。因为`span`元素不是段落，选择器不会匹配到它，因此它不会显示为粗体文字。 542 | 543 | If you did want to assign different styles to the `span` element, you could use the selector `span.warning`: 544 | 545 | 如果想为`span`元素分配不同的样式，可以使用选择符`span.warning`： 546 | 547 | ```css 548 | p.warning { 549 | font-weight: bold; 550 | } 551 | span.warning { 552 | font-style: italic; 553 | } 554 | ``` 555 | 556 | In this case, the warning paragraph is boldfaced, while the warning `span` is italicized. Each rule applies only to a specific type of element/class combination, so it does not leak over to other elements. 557 | 558 | 这样，警告段落被设置为粗体，而警告`span`被设置为斜体。每个规则仅应用于特定的元素/类组合，而不会影响到其他元素。 559 | 560 | Another option is to use a combination of a general class selector and an elementspecific class selector to make the styles even more useful, as in the following markup: 561 | 562 | 另一种做法是使用一个一般的类选择器和一个特定元素的类选择器，来让样式更加有用，例如这样： 563 | 564 | ```css 565 | .warning { 566 | font-style: italic; 567 | } 568 | span.warning { 569 | font-weight: bold; 570 | } 571 | ``` 572 | 573 | The results are shown in Figure 2-7. 574 | 575 | 效果在图 2-7 中。 576 | 577 |
578 | 
579 |
580 |
579 | 图 2-7：使用一般和特定选择器联合样式
581 | 582 | In this situation, any warning text will be italicized, but only the text within a `span` element with a `class` of `warning` will be both boldfaced and italicized. 583 | 584 | 这样设置，任何警告文字都被设置成斜体，但只有`class`属性值为`warning`的`span`元素中，文本既是粗体又是斜体。 585 | 586 | Notice the format of the general class selector in the previous example: it’s a class name preceded by a period without any element name, and no universal selector. In cases where you only want to select all elements that share a class name, you can omit the universal selector from a class selector without any ill effects. 587 | 588 | 请注意上例中的一般类选择器，它只包含一个类名和前面的句点，而没有任何元素名称，也没有通配选择器。如果你想选择具有某个类名的所有元素，省略通配选择器不会有任何影响。 589 | 590 | ### 多个类 Multiple Classes 591 | 592 | In the previous section, we dealt with class values that contained a single word. In HTML, it’s possible to have a space-separated list of words in a single class value. For example, if you want to mark a particular element as being both urgent and a warning, you could write: 593 | 594 | 我们在前面看到了包含单个单词的`class`的属性值。在 HTML 中，使用空白分隔的单词列表可以作为单个`class`的值。例如，如果你想把某个特定元素标记为既是紧急的又是一个警告，可以这样写： 595 | 596 | ```html 597 |When handling plutonium, care must be taken to avoid the formation of a critical mass.
598 |599 | With plutonium, 600 | the possibility of implosion is very real, and must be avoided at all costs. This can be 601 | accomplished by keeping the various masses separate. 602 |
603 | ``` 604 | 605 | The order of the words doesn’t matter; warning urgent would also suffice and would yield precisely the same results no matter how the CSS class attribute is written. 606 | 607 | （`class`值中）单词的顺序没有影响，写成`warning urgent`会产生完全相同的结果。 608 | 609 | Now let’s say you want all elements with a class of warning to be boldfaced, those with a class of urgent to be italic, and those elements with both values to have a silver background. This would be written as follows: 610 | 611 | 假如你想让所有`class`值为`warning`的元素加粗，把`class`值为`urgent`的设为斜体，而同时包含两个值的元素设置银色背景，写法是这样： 612 | 613 | ```css 614 | .warning { 615 | font-weight: bold; 616 | } 617 | .urgent { 618 | font-style: italic; 619 | } 620 | .warning.urgent { 621 | background: silver; 622 | } 623 | ``` 624 | 625 | By chaining two class selectors together, you can select only those elements that have both class names, in any order. As you can see, the HTML source contains class="urgent warning" but the CSS selector is written .warning.urgent. Regardless, the rule will still cause the “When handling plutonium . . . ” paragraph to have a silver background, as illustrated in Figure 2-8. This happens because the order the words are written in doesn’t matter. (This is not to say the order of classes is always irrelevant, but we’ll get to that later in the book.) 626 | 627 | 连接两个类选择器，可以选择那些只有同时具有两个类名的元素，无论类名的顺序如何。正如示例，HTML 代码中含有`class="urgent warning"`,但 CSS 选择器却写作`.warning.urgent`。这条规则依然可以把“When handling plutonium . . .”这段设置为银色背景，如图 1-8 所示，这是因为单词书写的顺序并不重要。（但这并不表示类名的顺序总是无关紧要的，我们将会在本书稍后涉及。） 628 | 629 |
630 | 
631 |
632 |
631 | 图 2-8：使用多类名选择元素
633 | 634 | If a multiple class selector contains a name that is not in the space-separated list, then the match will fail. Consider the following rule: 635 | 636 | 如果多类选择器里面包含一个不存在于空格分隔列表的类名，匹配将会失败。例如这个规则： 637 | 638 | ```css 639 | p.warning.help { 640 | background: red; 641 | } 642 | ``` 643 | 644 | As you would expect, the selector will match only those `p` elements with a `class` containing the words `warning` and `help`. Therefore, it will not match a `p` element with just the words `warning` and `urgent` in its `class` attribute. It would, however, match the following: 645 | 646 | 你可能期望这个选择器会匹配所有`class`中含有单词`warning`或`help`的`p`元素，然而实际上它不会匹配`class`属性中只有`warning`和`urgent`的`p`元素。它会匹配这样的元素： 647 | 648 | ```html 649 |Help me!
650 | ``` 651 | 652 | ### 2.3.3 ID 选择器 ID Selectors 653 | 654 | In some ways, ID selectors are similar to class selectors, but there are a few crucial differences. First, ID selectors are preceded by an octothorpe (#)—also known as a pound sign (in the US), hash sign, hash mark, or tic-tac-toe board—instead of a period. Thus, you might see a rule like this one: 655 | 656 | 从某些方面说，ID 选择器和类选择器类似，但它们有一些重要区别。首先，ID 选择器使用井号（`#`）开头，一条规则可能是这样的： 657 | 658 | ```css 659 | *#first-para { 660 | font-weight: bold; 661 | } 662 | ``` 663 | 664 | This rule produces boldfaced text in any element whose `id` attribute has a value of first-para. 665 | 666 | 这条规则为任意`id`属性值为`first-para`的元素设置文本粗体。 667 | 668 | The second difference is that instead of referencing values of the class attribute, ID selectors refer, unsurprisingly, to values found in id attributes. Here’s an example of an ID selector in action: 669 | 670 | 第二个区别是 ID 选择器（理所当然地）查找`id`属性而不是`class`属性的值。这是一个 ID 选择器生效的例子： 671 | 672 | ```css 673 | *#lead-para { 674 | font-weight: bold; 675 | } 676 | ``` 677 | 678 | ```html 679 |This paragraph will be boldfaced.
680 |This paragraph will NOT be bold.
681 | ``` 682 | 683 | Note that the value lead-para could have been assigned to any element within the document. In this particular case, it is applied to the first paragraph, but we could have applied it just as easily to the second or third paragraph. Or an unordered list. Or anything. 684 | 685 | 注意值`lead-para`可以关联给文档中的任意元素。在这个例子中，它只赋给了第一个段落，但是你可以同样赋给第二个、第三个段落。 686 | 687 | As with class selectors, it is possible to omit the universal selector from an ID selector. In the previous example, we could also have written: 688 | 689 | 和类选择器一样，ID 选择器中的通配选择符可以忽略。上例也可以写成这样： 690 | 691 | ```css 692 | #lead-para { 693 | font-weight: bold; 694 | } 695 | ``` 696 | 697 | The effect of this selector would be the same. 698 | 699 | 效果是一样的。 700 | 701 | Another similarity between classes and IDs is that IDs can be selected independently of an element. There may be circumstances in which you know that a certain ID value will appear in a document, but you don’t know the element on which it will appear (as in the plutonium-handling warnings), so you’ll want to declare standalone ID selectors. For example, you may know that in any given document, there will be an element with an ID value of `mostImportant`. You don’t know whether that most important thing will be a paragraph, a short phrase, a list item, or a section heading. You know only that it will exist in each document, occur in an arbitrary element, and appear no more than once. In that case, you would write a rule like this: 702 | 703 | 另一个与类选择器相似的地方是，ID 选择器也可以独立于元素类型。可能有些场景下你知道有一个确定 ID 值会出现在文档中，但不知道会出现在哪个元素上（如在前面的钚处理警告中），因此需要声明独立的 ID 选择器。例如，在任意给定的文档中，有一个元素的 ID 值是`mostImportant`，但不知道这个元素是一个段落、引用、列表还是段落头，只知道这个值会出现在每个文档中的某个随机的元素上，而且在每个文档中仅出现一次。在这种情况下，规则可以这样写： 704 | 705 | ```css 706 | #mostImportant { 707 | color: red; 708 | background: yellow; 709 | } 710 | ``` 711 | 712 | This rule would match any of the following elements (which, as noted before, should not appear together in the same document because they all have the same ID value): 713 | 714 | 这条规则会匹配下面的每一个元素（正如上面强调的，因为它们有相同的 ID 值，所以任意两个*不应该*同时出现在一个文档中）： 715 | 716 | ```html 717 |This is important!
718 | This is important! 719 |-
720 | This is important!
721 |
Don't look down.
755 | ``` 756 | 757 | Because of the change in case for the letter i, the selector will not match the element shown. 758 | 759 | 因为字母`i`的大小写不一致，选择器不会匹配元素。 760 | 761 | On a purely syntactical level, the dot-class notation (e.g., `.warning`) is not guaranteed to work for XML documents. As of this writing, the dot-class notation works in HTML, SVG, and MathML, and it may well be permitted in future languages, but it’s up to each language’s specification to decide that. The hash-ID notation (e.g., `#lead`) will work in any document language that has an attribute that enforces uniqueness within a document. Uniqueness can be enforced with an attribute called id, or indeed anything else, as long as the attribute’s contents are defined to be unique within the document. 762 | 763 | 从纯语法层次来说，点-类标记（例如：`.warning`）不能保证在 XML 文档中生效。在撰写本文时，点-类标记在 HTML、SVG 和 MathML 中有效，它可能在未来被更多语言支持，但这要取决于语言本身的规范。哈希-ID 标记（例如：#lead）在所有强制属性唯一性的语言中都有效。唯一性可以强制使用名为`id`的属性，或者任何其他属性，只要在文档中属性内容被定义为唯一的即可。 764 | 765 | ## 2.4 属性选择器 Attribute Selectors 766 | 767 | When it comes to both class and ID selectors, what you’re really doing is selecting values of attributes. The syntax used in the previous two sections is particular to HTML, XHTML, SVG, and MathML documents (as of this writing). In other markup languages, these class and ID selectors may not be available (as, indeed, those attributes may not be present). To address this situation, CSS2 introduced `attribute selectors`, which can be used to select elements based on their attributes and the values of those attributes. There are four general types of attribute selectors: simple attribute selectors, exact attribute value selectors, partial-match attribute value selectors, and leading-value attribute selectors. 768 | 769 | 当你使用类和 ID 选择器时，实际上是在选择属性的值。类选择器和 ID 选择器专用于 HTML、XHTML、SVG 和 MathML 文档（到撰写本文时），但在其它的标记语言中，这两个选择器可能是不可用的（属性可能不存在）。因此，CSS2 引入了**属性选择器**，使用元素的任意属性和值来选择元素。属性选择器有四种基本类型：简单属性选择器、准确属性值选择器、部分匹配属性选择器和头值属性选择器。 770 | 771 | ### 2.4.1 简单属性选择器 Simple Attribute Selectors 772 | 773 | If you want to select elements that have a certain attribute, regardless of that attribute’s value, you can use a simple attribute selector. For example, to select all h1 elements that have a class attribute with any value and make their text silver, write: 774 | 775 | 如果想选择具有某个特定属性的元素，而无论属性的值是什么，可以使用**简单属性选择器**。例如，选择所有具备`class`属性的`h1`元素，然后将其文本设置为银色： 776 | 777 | ```css 778 | h1[class] { 779 | color: silver; 780 | } 781 | ``` 782 | 783 | So, given the following markup: 784 | 785 | 对如下代码： 786 | 787 | ```html 788 |Hello
789 |Serenity
790 |Fooling
791 | ``` 792 | 793 | you get the result shown in Figure 2-9. 794 | 795 | 将得到如图 2-9 的结果： 796 | 797 |
798 | 
799 |
800 |
799 | 图 2-9：使用属性选择元素
801 | 802 | This strategy is very useful in XML documents, as XML languages tend to have element and attribute names that are specific to their purpose. Consider an XML language that is used to describe planets of the solar system (we’ll call it PlanetML). If you want to select all `pml-planet` elements with a `moons` attribute and make them boldface, thus calling attention to any planet that has moons, you would write: 803 | 804 | 这种策略对 XML 文档非常有用，因为 XML 语言的元素经常含有表示特定意义的属性名。例如可以想象一种描述太阳系行星的 XML 语言（可以叫它 PlanetML）。如果想要选择所有包含`moons`属性的`pml-planet`元素，把文本设置成粗体，用来突出有月亮的行星，可以这样写： 805 | 806 | ```css 807 | pml-planet[moons] { 808 | font-weight: bold; 809 | } 810 | ``` 811 | 812 | This would cause the text of the second and third elements in the following markup fragment to be boldfaced, but not the first: 813 | 814 | 第二个和第三个元素将会被设置成粗体，第一个则不会： 815 | 816 | ```html 817 |866 | Standards Info
867 | dead.letter 868 | ``` 869 | 870 | ### 2.4.2 基于准确属性值选择 Selection Based on Exact Attribute Value 871 | 872 | You can further narrow the selection process to encompass only those elements whose attributes are a certain value. For example, let’s say you want to boldface any hyperlink that points to a certain document on the web server. This would look something like: 873 | 874 | 可以进一步缩小选择器范围选择那些某个属性为某个确定值的元素。例如，把指向服务器上某个特定文档的链接设置为粗体： 875 | 876 | ```css 877 | a[href="http://www.css-discuss.org/about.html"] { 878 | font-weight: bold; 879 | } 880 | ``` 881 | 882 | This will boldface the text of any a element that has an href attribute with exactly the value http://www.css-discuss.org/about.html. Any change at all, even dropping the www. part or changing to a secure protocol with https, will prevent a match. 883 | 884 | 所有`href`属性值**准确地**是`http://www.css-discuss.org/about.html`的`a`元素会被设置为粗体。任何修改，即使去掉了`www.`，也会造成无法匹配。 885 | 886 | Any attribute and value combination can be specified for any element. However, if that exact combination does not appear in the document, then the selector won’t match anything. Again, XML languages can benefit from this approach to styling. Let’s return to our PlanetML example. Suppose you want to select only those planet elements that have a value of `1` for the attribute `moons`: 887 | 888 | 任何属性和值的联合都可以定义在任何元素上，然而，如果这个联合没有（准确地）出现在文档中，选择器不会匹配任何东西。XML 语言再次得益于这种方式来设置属性。回到 PlantML 的例子，如果想选择那些`moons`属性值为`1`的`planet`元素： 889 | 890 | ```css 891 | planet[moons='1'] { 892 | font-weight: bold; 893 | } 894 | ``` 895 | 896 | This would boldface the text of the second element in the following markup fragment, but not the first or third: 897 | 898 | 第二个元素的文本将会被设置为粗体，第一个和第三个不会： 899 | 900 | ```html 901 |
922 | Standards Info
923 | dead.link 924 | ``` 925 | 926 | 结果如图 2-10。 927 | 928 |
929 | 
930 |
931 |
930 | 图 2-10：使用属性和值选择元素
932 | 933 | Again, this format requires an exact match for the attribute’s value. Matching becomes an issue when the selector form encounters values that can in turn contain a space-separated list of values (e.g., the HTML attribute class). For example, consider the following markup fragment: 934 | 935 | 这种方式需要属性值的**精确**匹配。属性值为多个空白分隔的值列表时，匹配可能会因多个值的顺序不同而产生问题（如 HTML 的属性 `class`）。例如下面的代码片段： 936 | 937 | ```html 938 |When handling plutonium, care must be taken to avoid the formation of a critical mass.
957 | ``` 958 | 959 | To select this element based on its exact attribute value, you would have to write: 960 | 961 | 要基于准确属性值选择元素，应该这样： 962 | 963 | ```css 964 | p[class='urgent warning'] { 965 | font-weight: bold; 966 | } 967 | ``` 968 | 969 | This is not equivalent to the dot-class notation covered earlier, as we will see in the next section. Instead, it selects any p element whose class attribute has exactly the value "urgent warning", with the words in that order and a single space between them. It’s effectively an exact string match. 970 | 971 | 我们将在下节看到，这和之前介绍的点-类选择是**不**等同的。这条规则将会选择`class`属性值**精确**地是`urgent warning`的所有`p`元素，单词以相同的顺序，并且中间以单个空格隔开。它实际上是一个精确字符串匹配。 972 | 973 | Also, be aware that ID selectors and attribute selectors that target the id attribute are not precisely the same. In other words, there is a subtle but crucial difference between h1#page-title and `h1[id="page-title"]`. This difference is explained in “Specificity” on page 97. 974 | 975 | 同样地，ID 选择器和使用`id`属性的属性选择器也不是恰好相同的。换句话说，在`h1#page-title`和`h1[id="page-title"]`之间，存在着细微但很重要的区别。这种区别将在章节“特度”解释。 976 | 977 | ### 2.4.3 基于部分属性值选择 Selection Based on Partial Attribute Values 978 | 979 | Odds are that you’ll want to select elements based on portions of their attribute values, rather than the full value. For such situations, CSS actually offers a variety of options for matching substrings in an attribute’s value. These are summarized in Table 2-1. 980 | 981 | 你可能想基于属性值的一部分而不是整个值来选择元素，这种情况下 CSS 提供了一些选择，匹配属性值中的子串。它们总结在表格 1-1 中。 982 | 983 | _表格 1-1：子串匹配属性选择器_ 984 | 985 | | 类型 | 描述 | 986 | | :------------------ | :----------------------------------------------------------------------------------------------- | 987 | | `[foo~="bar"]` | 选择所有带有`foo`属性、且`foo`属性被空白分隔的单词列表中含有单词`bar`的元素。 | 988 | | `[foo*="bar"]` | 选择所有带有`foo`属性、且`foo`属性值中含有子串`bar`的元素。 | 989 | | `[foo^="bar"]` | 选择所有带有`foo`属性、且`foo`属性值以`bar`开头的元素。 | 990 | | `[foo$="bar"]` | 选择所有带有`foo`属性、且`foo`属性值以`bar`结束的元素。 | 991 | | `[foo|="bar"]` | 选择所有带有`foo`属性、且`foo`属性值以`bar`开头后接一个短线（`U+002D`）或者属性值是`bar`的元素。 | 992 | 993 | ### 2.4.4 A Particular Attribute Selection Type 特定的属性选择器 994 | 995 | The first of these attribute selectors that match on a partial subset of an element’s attribute value is actually easier to show than it is to describe. Consider the following rule: 996 | 997 | 基于部分属性值的选择器中的最后一个，展示它的用法比描述它更简单。看下面的规则： 998 | 999 | ```css 1000 | *[lang|='en'] { 1001 | color: white; 1002 | } 1003 | ``` 1004 | 1005 | This rule will select any element whose lang attribute is equal to en or begins with en-. Therefore, the first three elements in the following example markup would be selected, but the last two would not: 1006 | 1007 | 这条规则会选择任何`lang`属性等于`en`或者以`en-`开头的元素。因此，下面的示例中前三个标签会被选中，而后两个则不会： 1008 | 1009 | ```html 1010 |Hello!
1011 |Greetings!
1012 |G'day!
1013 | Bonjour!
1014 |Jrooana!
1015 | ``` 1016 | 1017 | In general, the form [att|="val"] can be used for any attribute and its values. Let’s say you have a series of figures in an HTML document, each of which has a filename like figure-1.gif and figure-3.jpg. You can match all of these images using the following selector: 1018 | 1019 | 一般来说，`[att|="val"]`的格式可以用于任何属性和属性值。如果 HTML 文档中有一系列图片，文件名都像**“figure-1.gif”**和**“figure-3.jpg”**这样，可以使用这样的选择器匹配所有这样的图片： 1020 | 1021 | ```css 1022 | img[src|='figure'] { 1023 | border: 1px solid gray; 1024 | } 1025 | ``` 1026 | 1027 | Or, if you’re creating a CSS framework or pattern library, instead of creating redundant classes like "btn btn-small btn-arrow btn-active", you can declare "btnsmall-arrow-active", and target the class of elements with: 1028 | 1029 | 如果你正在创建一个 CSS 框架或模式库，不必创建许多繁琐的类：`"btn btn-small btn-arrow btn-active"`，你可以声明`"btn-small-arrow-active"`，然后这样匹配元素的类： 1030 | 1031 | ```css 1032 | *[class|='btn'] { 1033 | border-radius: 5px; 1034 | } 1035 | ``` 1036 | 1037 | ```html 1038 | 1039 | ``` 1040 | 1041 | The most common use for this type of attribute selector is to match language values, as demonstrated in an upcoming section, “The :lang Pseudo-Class” on page 88. 1042 | 1043 | 这个属性选择器最常用的场景是用来匹配语言值，我们将在"`:lang`伪类"章节看到。 1044 | 1045 | #### 匹配空白分隔的列表中的一个单词 1046 | 1047 | For any attribute that accepts a space-separated list of words, it is possible to select elements based on the presence of any one of those words. The classic example in HTML is the class attribute, which can accept one or more words as its value. Consider our usual example text: 1048 | 1049 | 任何使用空白分隔单词列表的属性，都可以基于这些单词中的任意一个选择元素。HTML 中最经典的例子是`class`属性，该属性可以使用一或多个单词作为值。看这个常用例子： 1050 | 1051 | ```html 1052 |When handling plutonium, care must be taken to avoid the formation of a critical mass.
1053 | ``` 1054 | 1055 | Let’s say you want to select elements whose class attribute contains the word warn ing. You can do this with an attribute selector: 1056 | 1057 | 如果要选择`class`属性中包含单词`warning`的元素，可以使用这样的属性选择器： 1058 | 1059 | ```css 1060 | p[class~='warning'] { 1061 | font-weight: bold; 1062 | } 1063 | ``` 1064 | 1065 | Note the presence of the tilde (~) in the selector. It is the key to selection based on the presence of a space-separated word within the attribute’s value. If you omit the tilde, you would have an exact value-matching attribute selector, as discussed in the previous section. 1066 | 1067 | 注意选择器中的波浪线（~），这是基于属性值中分离单词进行选择的关键字。如果忽略了波浪线，选择器就变成了前面讨论过的精确值匹配的属性选择器。 1068 | 1069 | This selector construct is equivalent to the dot-class notation discussed in “Deciding Between Class and ID” on page 44. Thus, p.warning and p[class~="warning"] are equivalent when applied to HTML documents. Here’s an example that is an HTML version of the “PlanetML” markup seen earlier: 1070 | 1071 | 这个选择器跟“决定使用 Class 还是 ID”中的点-类选择器是等同的。也就是说，用于 HTML 文档时，`p.warning`和`p[class~="warning"]`是相等同的。这是前面提到过的“PlanetML”标记例子的一个 HTML 版本： 1072 | 1073 | ```html 1074 | 1075 | 1076 | Earth 1077 | ``` 1078 | 1079 | To italicize all elements with the word barren in their class attribute, you write: 1080 | 1081 | 要把所有`class`属性值中包含单词`barren`的元素设置为斜体： 1082 | 1083 | ```css 1084 | span[class~='barren'] { 1085 | font-style: italic; 1086 | } 1087 | ``` 1088 | 1089 | This rule’s selector will match the first two elements in the example markup and thus italicize their text, as shown in Figure 2-11. This is the same result we would expect from writing span.barren {font-style: italic;}. 1090 | 1091 | 这个选择器将会匹配例子中的前两个元素并把它们设置为斜体。这和使用`span.barren {font-style: italic;}`是一样的效果。 1092 | 1093 |
1094 | 
1095 |
1096 |
1095 | 图 2-11：使用部分属性值选择元素
1097 | 1098 | So why bother with the tilde-equals attribute selector in HTML? Because it can be used for any attribute, not just `class`. For example, you might have a document that contains a number of images, only some of which are figures. You can use a partialmatch value attribute selector aimed at the `title` text to select only those figures: 1099 | 1100 | 既然效果相同，为什么还要在 HTML 中使用波浪线-等号属性选择器呢？因为它可被用于任何属性，而不仅仅是`class`。例如：一个文档中包含许多图片，其中一部分是图表，你可以使用匹配部分属性值的选择器选择`title`属性的文字，来选中那些是图表的图片： 1101 | 1102 | ```css 1103 | img[title~='Figure'] { 1104 | border: 1px solid gray; 1105 | } 1106 | ``` 1107 | 1108 | This rule selects any image whose title text contains the word Figure. Therefore, as long as all your figures have title text that looks something like “Figure 4. A baldheaded elder statesman,” this rule will match those images. For that matter, the selector img[title~="Figure"] will also match a title attribute with the value “How to Figure Out Who’s in Charge.” Any image that does not have a title attribute, or whose title value doesn’t contain the word “Figure,” won’t be matched. 1109 | 1110 | 这条规则会选择所有`title`文字中包含`Figure`的单词。因此，如果所有的图表的`title`中都有像“Figure 4. A bald- headed elder statesman,”这样的文字，这条规则会匹配所有的图表。同样的，选择器`img[title~="Figure"]`也会匹配`title`属性值是“How to Figure Out Who’s in Charge.”这样内容的图片。所有没有`title`属性的图片，或者`title`值中不包含单词“Figure”的图片，都不会被匹配。 1111 | 1112 | #### 匹配属性值中的子串 Matching a substring within an attribute value 1113 | 1114 | Sometimes you want to select elements based on a portion of their attribute values, but the values in question aren’t space-separated lists of words. In these cases, you can use the form `[att*="val"]` to match substrings that appear anywhere inside the attribute values. For example, the following CSS matches any `span` element whose class attribute contains the substring `cloud`, so both “cloudy” planets are matched, as shown in Figure 2-12: 1115 | 1116 | 有时需要匹配属性值的一部分，但并不是空格分隔的单词。这种情况下，可以使用`[att*="val"]`的形式匹配属性值中的任何位置。例如：下面的 CSS 匹配任何`class`属性值中包含子串`cloud`的`span`元素，所以两个“cloudy”的行星都会被匹配，如图 1-12。 1117 | 1118 | ```css 1119 | span[class*='cloud'] { 1120 | font-style: italic; 1121 | } 1122 | ``` 1123 | 1124 | ```html 1125 | 1126 | 1127 | Earth 1128 | ``` 1129 | 1130 |
1131 | 
1132 |
1133 |
1132 | 图 2-12：基于属性值内子串选择元素
1134 | 1135 | As you can imagine, there are many useful applications for this particular capability. For example, suppose you wanted to specially style any links to the O’Reilly website. Instead of classing them all and writing styles based on that class, you could instead write the following rule: 1136 | 1137 | 这种用法有许多有用的场景，例如为所有到 O'Reilly Media 网页的链接添加特殊样式。避免给它们设置类名并基于类添加样式，可以简单地使用下面的规则： 1138 | 1139 | ```css 1140 | a[href*='oreilly.com'] { 1141 | font-weight: bold; 1142 | } 1143 | ``` 1144 | 1145 | You aren’t confined to the class and href attributes. Any attribute is up for grabs here: `title`, `alt`, `src`, `id`…if the attribute has a value, you can style based on a substring within that value. The following rule draws attention to any image with the string `“space”` in its source URL: 1146 | 1147 | 选择不限于使用`class`和`href`属性，任何属性都可以。`title`、`alt`、`src`、`id`……可以基于任何属性值的子串添加样式。下面的规则选择所有源文件 URL 中包含字符串“space”的图片： 1148 | 1149 | ```css 1150 | img[src*='space'] { 1151 | border: 5px solid red; 1152 | } 1153 | ``` 1154 | 1155 | Similarly, the following rule draws attention to input elements that have a title tells the user what to, and any other input whose title contains the substring “format” in its title: 1156 | 1157 | 类似地，下面的规则关注有标题的`input`元素，标题中包含子串`format`： 1158 | 1159 | ```css 1160 | input[title*='format'] { 1161 | background-color: #dedede; 1162 | } 1163 | ``` 1164 | 1165 | ```html 1166 | 1167 | ``` 1168 | 1169 | A common use for the general substring attribute selector is to match a section of a class in pattern library class names. Elaborating on the last example, we can target any class name that starts with `"btn"` followed by a dash, and that contains the substring `“arrow”` preceded by a dash: 1170 | 1171 | 属性子串匹配选择器常用来匹配模式库中的类名。在前面的例子中，我们可以匹配以`btn`开始后跟一个短线，并且包含前面有短线的子串`arrow`的类名： 1172 | 1173 | ```css 1174 | *[class|='btn'][class*='-arrow']:after { 1175 | content: '▼'; 1176 | } 1177 | ``` 1178 | 1179 | ```html 1180 | 1181 | ``` 1182 | 1183 | The matches are exact: if you include whitespace in your selector, then whitespace must also be present in an attribute’s value. The attribute names and values must be case-sensitive only if the underlying document language requires case sensitivity. Class names, titles, URLs, and ID values are all case-sensitive, but HTML attribute keyterm values, such as input types, are not: 1184 | 1185 | 这种匹配方式是精确匹配——如果选择器中包含空白，属性值中必须包含空白才能匹配。只有当依赖的文档语言要求区分大小写时，属性名和值才必须区分大小写。类名、标题和 ID 值都是大小写敏感的，但 HTML 的属性关键字值，比如`input`元素的类型，不区分大小写： 1186 | 1187 | ```css 1188 | input[type='CHeckBoX'] { 1189 | margin-right: 10px; 1190 | } 1191 | ``` 1192 | 1193 | ```html 1194 | 1195 | ``` 1196 | 1197 | #### 匹配属性值开头的子串 Matching a substring at the beginning of an attribute value 1198 | 1199 | In cases where you want to select elements based on a substring at the beginning of an attribute value, then the attribute selector pattern `[att^="val"]` is what you’re seeking. This can be particularly useful in a situation where you want to style types of links differently, as illustrated in Figure 2-13. 1200 | 1201 | 当需要基于属性值开头的子串选择元素时，可以使用属性选择器模式`[attr^="val"]`。这个匹配模式在给不同类别的链接设置样式时特别有用，如图 2-13 所示： 1202 | 1203 | ```css 1204 | a[href^='https:'] { 1205 | font-weight: bold; 1206 | } 1207 | a[href^='mailto:'] { 1208 | font-style: italic; 1209 | } 1210 | ``` 1211 | 1212 |
1213 | 
1214 |
1215 |
1214 | 图 2-13：基于属性开头的子串选择元素
1216 | 1217 | Another use case is when you want to style all images in an article that are also figures, as in the figures you see throughout this text. Assuming that the alt text of each figure begins with text in the pattern “Figure 5”—which is an entirely reasonable assumption in this case—then you can select only those images as follows: 1218 | 1219 | 另一个使用场景是为文档中所有内容是说明的图片添加样式——假定所有的说明图的`alt`属性的文字都以“Figure 5”这样的模式开头——则可以使用这种方式选择这些图片： 1220 | 1221 | ```css 1222 | img[alt^='Figure'] { 1223 | border: 2px solid gray; 1224 | display: block; 1225 | margin: 2em auto; 1226 | } 1227 | ``` 1228 | 1229 | The potential drawback here is that any img element whose alt starts with “Figure”will be selected, whether or not it’s meant to be an illustrative figure. The likeliness of that occurring depends on the document in question. 1230 | 1231 | 潜藏的问题是，**任何**`alt`属性值以“Figure”开头的`img`标签都会被选择，而无论它是不是一个说明图。显然，是否产生这个问题是由文档决定的（而不是选择器）。 1232 | 1233 | Another use case is selecting all of the calendar events that occur on Mondays. In this case, let’s assume all of the events have a `title` attribute containing a date in the format “Monday, March 5th, 2012.” Selecting them all is a simple matter of [title^="Monday"]. 1234 | 1235 | 另一个使用场景是选择所有周一的日程。这种场景中，我们约定所有的事件都有个`title`属性，它以这样的日期格式`Monday,March 5th,2012`开头。选择它们只需要简单地使用`[title^="Monday"]`。 1236 | 1237 | #### 匹配属性值结尾的字串 Matching a substring at the end of an attribute value 1238 | 1239 | The mirror image of beginning-substring matching is ending-substring matching, which is accomplished using the `[att$="val"]`pattern. A very common use for this capability is to style links based on the kind of resource they target, such as separate styles for PDF documents, as illustrated in Figure 2-14. 1240 | 1241 | 与开头子串匹配相对应的是结尾子串匹配，使用选择器模式`[att$="val"]`。最常见的使用场景是基于链接的资源类型添加样式，例如图 2-14 所示，为指向 PDF 文档的链接添加特定样式。 1242 | 1243 | ```css 1244 | a[href$='.pdf'] { 1245 | font-weight: bold; 1246 | } 1247 | ``` 1248 | 1249 |
1250 | 
1251 |
1252 |
1251 | 图 2-14：基于属性结尾的子串选择元素
1253 | 1254 | Similarly, you could (for whatever reason) select images based on their image format: 1255 | 1256 | 类似地，可以（无论因何）基于格式选择图片： 1257 | 1258 | ```css 1259 | img[src$='.gif'] { 1260 | ...; 1261 | } 1262 | img[src$='.jpg'] { 1263 | ...; 1264 | } 1265 | img[src$='.png'] { 1266 | ...; 1267 | } 1268 | ``` 1269 | 1270 | To continue the calendar example from the previous section, it would be possible to select all of the events occurring within a given year using a selector like `[title $="2015"]`. 1271 | 1272 | 上一节中日程的例子，可以基于给定的年份选择所有事件，使用一个类似这样的选择器`[title$="2015"]`（`title`属性以年份结尾）。 1273 | 1274 | You may have noticed that I’ve quoted all the attribute values in the attribute selectors. Quoting is required if the value includes any special characters, begins with a dash or digit, or is otherwise invalid as an identifier and needs to be quoted as a string. To be safe, I recommend always quoting attribute values in attribute selectors, even though it is only required to makes strings out of invalid identifiers. 1275 | 1276 | _**你可能注意到了，属性选择器中的所有属性值都用了引号包围。当属性值包含任何特殊字符、以短线或数字开头、或其他非法标识符时，需要使用引号把它标记成字符串。为了安全，建议在任何情况下都为属性选择器中的属性值添加引号，尽管只有非法标识符导致它需要被标记成字符串的时候引号才是必需的。**_ 1277 | 1278 | ### 2.4.5 忽略大小写标识符 The Case Insensitivity Identifier 1279 | 1280 | CSS Selectors level 4 introduces a case-insensitivity option to attribute selectors. Including an i before the closing bracket will allow the selector to match attribute values case-insensitively, regardless of document language rules. 1281 | 1282 | CSS Selectors level 4 为属性选择器引入了忽略大小写选项。在中括号关闭之前使用`i`允许选择器匹配属性值的时候忽略大小写，无视文档语言的规则。 1283 | 1284 | For example, suppose you want to select all links to PDF documents, but you don’t know if they’ll end in .pdf, .PDF, or even .Pdf. Here’s how: 1285 | 1286 | 例如，你想选择所有指向 PDF 文档的链接，但并不确定它们以`.pdf`、`.PDF`还是`.Pdf`结束，可以这样： 1287 | 1288 | ```css 1289 | a[href$='.PDF' i] 1290 | ``` 1291 | 1292 | Adding that humble little i means the selector will match any a element whose href attribute’s value ends in .pdf, regardless of the capitalization of the letters P, D, and F. 1293 | 1294 | 添加一个小小的`i`表示选择器匹配任何`href`属性以`.pdf`结束的`a`元素，无论其中是否包含大写的`P`、`D`或`F`。 1295 | 1296 | This case-insensitivity option is available for all attribute selectors we’ve covered. Note, however, that this only applies to the values in the attribute selectors. It does not enforce case insensitivity on the attribute names themselves. Thus, in a case-sensitive language, `planet[type*="rock" i]` will match all of the following. 1297 | 1298 | 忽略大小写选项适用于前面涉及的所有属性选择器，但要注意它只用于属性选择器的**值**，而不能用于属性名本身。因此，在大小写敏感的语言中，`planet[type*="rock" i]`可以匹配下面所有的元素： 1299 | 1300 | ```html 1301 |Meerkat Central
1342 |1343 | Welcome to Meerkat Central, the 1344 | best meerkat web site on the entire Internet! 1347 |
1348 |-
1349 |
-
1350 | We offer:
1351 |
-
1352 |
- Detailed information on how to adopt a meerkat 1353 |
- Tips for living with a meerkat 1354 |
-
1355 | Fun things to do with a meerkat, including:
1356 |
-
1357 |
- Playing fetch 1358 |
- Digging for food 1359 |
- Hide and seek 1360 |
1362 |
1364 | - ...and so much more! 1365 |
Questions? Contact us!
1367 | 1368 | 1369 | ``` 1370 | 1371 | Much of the power of CSS is based on the parent-child relationship of elements. HTML documents (actually, most structured documents of any kind) are based on a hierarchy of elements, which is visible in the “tree” view of the document (see Figure 2-15). In this hierarchy, each element fits somewhere into the overall structure of the document. Every element in the document is either the parent or the child of another element, and it’s often both. 1372 | 1373 | CSS 的能力很大程度基于于元素的**父-子关系**。HTML 文档（事实上绝大部分结构化文档）基于元素层级结构，构成文档的“树状”视图（见图 1-15）。在这种层级结构中，每个元素都处在整个文档结构中的某个适当位置上，每个元素都是其他元素的**父**或者**子**，常常既是父又是子。 1374 | 1375 |
1376 | 
1377 |
1378 |
1377 | 图 2-15：文档树结构
1379 | 1380 | An element is said to be the parent of another element if it appears directly above that element in the document hierarchy. For example, in Figure 2-15, the first `p` element is parent to the `em` and `strong` elements, while `strong` is parent to an anchor (`a`) element, which is itself parent to another `em` element. Conversely, an element is the child of another element if it is directly beneath the other element. Thus, the anchor element in Figure 2-15 is a child of the strong element, which is in turn child to the p element, which is itself child to the `body`, and so on. 1381 | 1382 | 在文档层级结构中，如果一个元素在另一个元素的紧邻的上方，就被称作那个元素的父元素。例如，在图 2-15 中，第一个`p`元素是`em`和`strong`元素的父元素，同时`strong`是一个锚点（`a`）元素的父元素，这个`a`元素又是另一个`em`元素的父元素。反过来，如果在文档层级中，一个元素在另一个元素的紧邻的下方，就被称作那个元素的子元素。因此，图 1-15 中的锚点元素是`strong`元素的子元素，`strong`元素又是`p`元素的子元素，等等。 1383 | 1384 | The terms “parent” and “child” are specific applications of the terms ancestor and descendant. There is a difference between them: in the tree view, if an element is exactly one level above or below another, then they have a parent-child relationship. If the path from one element to another is traced through two or more levels, the elements have an ancestor-descendant relationship, but not a parent-child relationship. (A child is also a descendant, and a parent is also an ancestor.) In Figure 2-15, the first ul element is parent to two li elements, but the first ul is also the ancestor of every element descended from its li element, all the way down to the most deeply nested li elements. 1385 | 1386 | “父”和“子”是**祖先**和**后代**的特例。它们的区别是：在树状视图中，如果一个元素在另一个元素上面一级，那么它们是父-子关系。如果一个元素到另一个元素的路径有两级或者更多，那么它们是祖先-后代关系，但不是父-子关系。（当然，子也是后代，同时父也是祖先。）在图 1-15 中，第一个`ul`元素是两个`li`元素的父元素，同时也是它的`li`元素所有后代元素的祖先元素，直到嵌套路径最深的`li`元素。 1387 | 1388 | Also, in Figure 2-15, there is an anchor that is a child of strong, but also a descendant of p, body, and html elements. The body element is an ancestor of everything that the browser will display by default, and the html element is ancestor to the entire document. For this reason, in an HTML or XHTML document, the html element is also called the root element. 1389 | 1390 | 同时，在图 2-15 中，存在一个锚点元素既是`strong`元素的子元素，又是`p`、`body`和`html`元素的后代元素。`body`元素是浏览器默认显示的所有元素的祖先元素，`html`是整个文档中所有其他元素的祖先元素。因此在 HTML 或 XHTML 文档中，`html`元素也被叫做**根元素**。 1391 | 1392 | ### 2.5.2 后代选择器 Descendant Selectors 1393 | 1394 | The first benefit of understanding this model is the ability to define descendant selectors (also known as contextual selectors). Defining descendant selectors is the act of creating rules that operate in certain structural circumstances but not others. As an example, let’s say you want to style only those em elements that are descended from h1 elements. You could put a class attribute on every em element found within an h1, but that’s almost as time-consuming as using the font tag. It’s far more efficient to declare rules that match only em elements that are found inside h1 elements. 1395 | 1396 | 理解文档模型的第一个用处是可以定义**后代选择器**（也叫做**上下文选择器**）。定义后代选择器可以创建只作用于特定结构的规则。例如，如果想要只为那些是`h1`元素的后代的`em`元素设置样式。你可以为`h1`中的`em`元素添加一个`class`属性，但这样做会跟使用`font`标签一样耗费时间。很明显，声明一个只匹配`h1`元素中的`em`元素的规则更加方便。 1397 | 1398 | To do so, write the following: 1399 | 1400 | 实现这个规则，可以这样写： 1401 | 1402 | ```css 1403 | h1 em { 1404 | color: gray; 1405 | } 1406 | ``` 1407 | 1408 | This rule will make gray any text in an em element that is the descendant of an h1 element. Other em text, such as that found in a paragraph or a block quote, will not be selected by this rule. Figure 2-16 makes this clear. 1409 | 1410 | 这条规则会把所有是`h1`元素后代的`em`元素中的文本设置为灰色。其他的`em`文本，例如在段落（`p`）或引用（`blackquote`）中的`em`元素，不会被这条规则选择。见图 1-16。 1411 | 1412 |
1413 | 
1414 |
1415 |
1414 | 图 2-16：基于上下文选择元素
1416 | 1417 | In a descendant selector, the selector side of a rule is composed of two or more spaceseparated selectors. The space between the selectors is an example of a combinator. Each space combinator can be translated as “found within,” “which is part of,” or “that is a descendant of,” but only if you read the selector right to left. Thus, h1 em can be translated as, “Any em element that is a descendant of an h1 element.” (To read the selector left to right, you might phrase it something like, “Any h1 that contains an em will have the following styles applied to the em.”) 1418 | 1419 | 在后代选择器中，选择器由两个或更多空白分隔的选择器组成。选择器之间的空格是一个**组合器**的例子。每个空格组合器都可以被译作“在……中”、“是……的一部分”或“是……的后代”，前提是选择器从右向左读。因此，`h1 em`可以被译作“把样式作用于任何`em`元素，如果它是`h1`元素的后代”。（如果选择器从左向右读，则是：“选择任何`h1`，如果它包含一个`em`元素，规则将会作用于它包含的`em`”）。 1420 | 1421 | You aren’t limited to two selectors. For example: 1422 | 1423 | 可以使用不止两个选择器，例如： 1424 | 1425 | ```css 1426 | ul ol ul em { 1427 | color: gray; 1428 | } 1429 | ``` 1430 | 1431 | In this case, as Figure 2-17 shows, any emphasized text that is part of an unordered list that is part of an ordered list that is itself part of an unordered list (yes, this is correct) will be gray. This is obviously a very specific selection criterion. 1432 | 1433 | 在这种情况下，任何`em`文本，如果这个`em`在一个`ul`中，同时`ul`在一个`ol`中，而`ol`又在另一个`ul`中，这个`em`会被设置为灰色,如 2-17 所示。这是一条非常具体的选择规则。 1434 | 1435 |
1436 | 
1437 |
1438 |
1437 | 图 2-17：一个非常具体的后代选择器
1439 | 1440 | Descendant selectors can be extremely powerful. They make possible what could never be done in HTML—at least not without oodles of font tags. Let’s consider a common example. Assume you have a document with a sidebar and a main area. The sidebar has a blue background, the main area has a white background, and both areas include lists of links. You can’t set all links to be blue because they’d be impossible to read in the sidebar. 1441 | 1442 | 后代选择器非常有用，它使得 HTML 中（至少是不使用怪异的`font`标签时）办不到的事情变成可能。一个常见的场景是：如果文档中有一个侧边栏和一个主区域，侧边栏的背景是蓝色，而主区域的背景是白色，它们都包含链接。不能把链接设置为蓝色，因为如果这样的话，侧边栏中的链接就看不到了。 1443 | 1444 | The solution: descendant selectors. In this case, you give the element that contains your sidebar a class of sidebar and enclose the main area in a main element. Then, you write styles like this: 1445 | 1446 | 解决方法是：后代选择器。在这种情况下，给包含侧边栏的元素（一般是一个`div`）添加一个`class`值`sidebar`，把主区域的`class`命名为`main`，然后使用如下样式： 1447 | 1448 | ```css 1449 | .sidebar { 1450 | background: blue; 1451 | } 1452 | .main { 1453 | background: white; 1454 | } 1455 | .sidebar a:link { 1456 | color: white; 1457 | } 1458 | .main a:link { 1459 | color: blue; 1460 | } 1461 | ``` 1462 | 1463 | Figure 2-18 shows the result. 1464 | 1465 | 图 2-18 显示了样式的结果。 1466 | 1467 |
1468 | 
1469 |
1470 |
1469 | 图 2-18：使用后代选择器为同一类型的元素添加不同的样式
1471 | 1472 | :link refers to links to resources that haven’t been visited. We’ll talk about it in detail in “Hyperlink pseudo-classes” on page 77. 1473 | 1474 | _**`:link`选择那些尚未被访问过的资源链接，我们将在“超链接伪类”中详细讨论。**_ 1475 | 1476 | Here’s another example: let’s say that you want gray to be the text color of any b (boldface) element that is part of a blockquote and for any bold text that is found in a normal paragraph: 1477 | 1478 | 另一个例子是：如果要把所有在`blockquote`和`p`中的`b`元素文本设置为灰色： 1479 | 1480 | ```css 1481 | blockquote b, 1482 | p b { 1483 | color: gray; 1484 | } 1485 | ``` 1486 | 1487 | The result is that the text within b elements that are descended from paragraphs or block quotes will be gray 1488 | 1489 | 这条样式的结果是在段落或引用段落中的`b`元素中的文本显示为灰色。 1490 | 1491 | One overlooked aspect of descendant selectors is that the degree of separation between two elements can be practically infinite. For example, if you write `ul` `em`, that syntax will select any `em` element descended from a ul element, no matter how deeply nested the `em` may be. Thus, `ul` `em` would select the `em` element in the following markup: 1492 | 1493 | 后代选择器的一个容易被忽略的地方是，元素和后代元素之间可以间隔无限代其他元素。例如，如果使用规则`ul em`，将会选择`ul`元素后代中的任何`em`元素，无论`em`元素嵌套多么深。因此，对下面的代码，`ul em`会匹配到其中的`em`元素。 1494 | 1495 | ```html 1496 |-
1497 |
-
1498 | List item 1
1499 |
-
1500 |
- List item 1-1 1501 |
- List item 1-2 1502 |
-
1503 | List item 1-3
1504 |
-
1505 |
- List item 1-3-1 1506 |
- List item 1-3-2 1507 |
- List item 1-3-3 1508 |
1510 | - List item 1-4 1511 |
1513 |
1528 |
1530 | ```
1531 |
1532 | What the CSS says, in effect, is “any span inside a div that doesn’t have a class containing the word help should be gray” in the first rule, and “any span inside a div whose class contains the word help” in the second rule. In the given markup fragment, both rules apply to the span shown.
1533 |
1534 | 第一条规则表示“任何`class`中不包含单词`help`的`div`元素中的`span`元素被设置为灰色”，第二条规则表示“任何`class`中包含单词`help`的`div`元素中的`span`元素被设置为红色”。对示例中的 HTML 代码来说，两条规则都会被作用于`span`元素。
1535 |
1536 | Because the two rules have equal weight and the “red” rule is written last, it wins out and the span is red. The fact that the div class="aside" is “closer to” the span than the div class="help" is irrelevant. Again: descendant selectors have no notion of element proximity. Both rules match, only one color can be applied, and due to the way CSS works, red is the winner here. (We’ll discuss why in the next chapter.)
1537 |
1538 | 因为两条规则有相同的权重，且“红色”规则被写在后面，`span`会被设置为红色。虽然`div class="aside"`比`div class="help"`相比，与`span`元素更“紧密”，但实际上这种紧密程度与规则的选择毫不相关。亦即：后代选择器没有紧密程度的概念。两条规则都匹配了元素，只有一种颜色可以生效，根据 CSS 的工作方式，红色“胜利”了。（下一章讨论）
1539 |
1540 | ### 2.5.3 选择子元素 Selecting Children
1541 |
1542 | In some cases, you don’t want to select an arbitrarily descended element. Rather, you want to narrow your range to select an element that is a child of another element. You might, for example, want to select a strong element only if it is a child (as opposed to any level of descendant) of an h1 element. To do this, you use the child combinator, which is the greater-than symbol (>):
1543 |
1544 | 有时，我们并不想选择全部的后代元素，而是把选择范围控制在元素的子级，例如选择一个是`h1`元素的子元素（而不是任意后代元素）的`strong`元素，这种情况下，可以使用子元素组合器，它是一个大于号（`>`）:
1545 |
1546 | ```css
1547 | h1 > strong {
1548 | color: red;
1549 | }
1550 | ```
1551 |
1552 | This rule will make red the strong element shown in the first h1, but not the second:
1553 |
1554 | 这条规则将会把下面的第一个`h1`元素中的`strong`元素设置为红色，第二个`h1`元素中的`strong`元素则不会被设置为红色。
1555 |
1556 | ```html
1557 | This text contains a span element within.
1529 | This is very important.
1558 |1559 | This is really very important. 1560 |
1561 | ``` 1562 | 1563 | Read right to left, the selector h1 > strong translates as, “Selects any strong element that is a direct child of an h1 element.” The child combinator can be optionally surrounded by whitespace. Thus, h1 > strong, h1> strong, and h1>strong are all equivalent. You can use or omit whitespace as you wish. 1564 | 1565 | 从右往左读，选择器`h1 > strong`可以译作“选择任何`strong`元素，如果它是一个`h1`元素的子元素”。子元素组合器两边可以添加空格, 你可以根据自己的爱好添加或省略空格，`h1 > strong`、`h1> strong`和`h1>strong`是完全等价的。 1566 | 1567 | When viewing the document as a tree structure, it’s easy to see that a child selector restricts its matches to elements that are directly connected in the tree. Figure 2-19 shows part of a document tree. 1568 | 1569 | 观察文档的树状结构视图，子元素选择器把匹配限制在直接连接的元素上。图 1-19 显示了部分文档树。 1570 | 1571 |
1572 | 
1573 |
1574 |
1573 | 图 2-19：一个文档树片段
1575 | 1576 | In this tree fragment, you can pick out parent-child relationships. For example, the a element is parent to the strong, but it is child to the p element. You could match elements in this fragment with the selectors p > a and a > strong, but not p > strong, since the strong is a descendant of the p but not its child. 1577 | 1578 | 在这文档树片段中，可以很清楚的观察到父-子关系。例如，`a`元素是`strong`元素的父元素，同时是`p`元素的子元素。在这个片段中，可以使用`p > a`和`a > strong`选择元素，但无法使用`p > strong`选择元素，因为`strong`是`p`的后代元素但不是子元素。 1579 | 1580 | You can also combine descendant and child combinations in the same selector. Thus, table.summary td > p will select any p element that is a child of a td element that is itself descended from a table element that has a class attribute containing the word summary. 1581 | 1582 | 在同一个选择器中可以结合使用后代选择器和子元素原则器。`table.summary td > p`选择是`td`元素子元素的`p`元素，同时这个`td`元素需要是一个`class`属性值包含`summary`的`table`元素的后代元素。 1583 | 1584 | ### 2.5.4 选择相邻兄弟元素 Selecting Adjacent Sibling Elements 1585 | 1586 | Let’s say you want to style the paragraph immediately after a heading, or give a special margin to a list that immediately follows a paragraph. To select an element that immediately follows another element with the same parent, you use the adjacentsibling combinator, represented as a plus symbol (+). As with the child combinator, the symbol can be surrounded by whitespace, or not, at the author’s discretion. 1587 | 1588 | 假如想要为一个紧跟着标题的段落设置样式，或者给一个紧跟着段落的列表添加一个边距，可以使用**相邻兄弟组合器**来选择在同一个父级元素下紧跟着另一个元素的元素，组合器使用加号（`+`）。就像子级选择器一样，这个符号也可以在两边添加或省略空格。 1589 | 1590 | To remove the top margin from a paragraph immediately following an `h1` element, 1591 | write: 1592 | 1593 | 移除一个紧跟`h1`元素的段落的上边距： 1594 | 1595 | ```css 1596 | h1 + p { 1597 | margin-top: 0; 1598 | } 1599 | ``` 1600 | 1601 | The selector is read as, “Selects any p element that immediately follows an h1 element that shares a parent with the p element.” 1602 | 1603 | 选择器读作：“选择任何紧跟在`h1`元素后面的`p`元素”。 1604 | 1605 | To visualize how this selector works, it is easiest to once again consider a fragment of a document tree, shown in Figure 2-20. 1606 | 1607 | 看图 2-20 的文档树片段，更清晰地观察这个选择器是如何生效的： 1608 | 1609 |
1610 | 
1611 |
1612 |
1611 | 图 2-20：另一个文档树片段
1613 | 1614 | In this fragment, a pair of lists descends from a div element, one ordered and the other not, each containing three list items. Each list is an adjacent sibling, and the list items themselves are also adjacent siblings. However, the list items from the first list are not siblings of the second, since the two sets of list items do not share the same parent element. (At best, they’re cousins, and CSS has no cousin selector.) 1615 | 1616 | 在这个片段中有两个列表都是`div`元素的后代，一个是有序列表，另一个是无序列表，每个都包含三个列表项。两个列表互为相邻兄弟，每个列表中的列表项也互为相邻兄弟，但第一个列表中的项与第二个列表中的列**不是**相邻兄弟，因为它们没有共同的父元素。（它们最多是表兄弟元素，但 CSS 没有表兄弟元素选择器。） 1617 | 1618 | Remember that you can select the second of two adjacent siblings only with a single combinator. Thus, if you write li + li {font-weight: bold;}, only the second and third items in each list will be boldfaced. The first list items will be unaffected, as illustrated in Figure 2-21. 1619 | 1620 | 选择后面的两个相邻兄弟只需要一个组合器符号，如果写作`li + li {font-weight: bold;}`,只有每个列表中的第二项和第三项会被设置为粗体，样式不会对第一项生效。见图 2-21. 1621 | 1622 |
1623 | 
1624 |
1625 |
1624 | 图 2-21：选择相邻兄弟元素
1626 | 1627 | To work properly, CSS requires that the two elements appear in “source order.” In our example, an ol element is followed by a ul element. This allows us to select the second element with ol + ul, but we cannot select the first using the same syntax. For ul + ol to match, an ordered list must immediately follow an unordered list. 1628 | 1629 | CSS 的正确性依赖于两个元素的“代码顺序“。在上面的例子中，一个`ol`元素后面紧跟着一个`ul`元素，因此可以使用`ol + ul`选择第二个（`ul`）元素，但不能选择第一个（`ol`）元素。如果想使`ul + ol`匹配，需要一个`ol`元素紧跟在一个`ul`元素后面。 1630 | 1631 | Keep in mind that text content between two elements does not prevent the adjacentsibling combinator from working. Consider this markup fragment, whose tree view would be the same as that shown in Figure 2-19: 1632 | 1633 | 需要记住，两个元素之间的文本内容**不会**影响相邻元素组合器。下面的代码片段，树视图与图 2-19 是一样的： 1634 | 1635 | ```html 1636 |
1637 |
1649 | ```
1650 |
1651 | Even though there is text between the two lists, we can still match the second list with the selector ol + ul. That’s because the intervening text is not contained with a sibling element, but is instead part of the parent div. If we wrapped that text in a paragraph element, it would then prevent ol + ul from matching the second list. Instead, we might have to write something like ol + p + ul.
1652 |
1653 | 尽管两个列表之间有文本内容，选择器`ol + ul`依然会匹配第二个列表。因为文本并不包含一个兄弟元素，而是属于父元素`div`的一部分。如果把文本内容用一个段落元素（`p`）包起来，`ol + ul`匹配第二个列表的行为将会被终止。要匹配第二个列表，需要用`ol + p + ul`这样的选择器。
1654 |
1655 | As the following example illustrates, the adjacent-sibling combinator can be used in conjunction with other combinators:
1656 |
1657 | 相邻兄弟组合器可以与其他组合器连接使用，例如：
1658 |
1659 | ```css
1660 | html > body table + ul {
1661 | margin-top: 1.5em;
1662 | }
1663 | ```
1664 |
1665 | The selector translates as, “Selects any ul element that immediately follows a sibling table element that is descended from a body element that is itself a child of an html element.”
1666 |
1667 | 这个选择器是指：“选择任何紧跟`table`元素的兄弟`ul`元素，同时这个`table`元素是一个`body`元素的后代，而`body`元素是一个`html`的子元素。”
1668 |
1669 | As with all combinators, you can place the adjacent-sibling combinator in a more complex setting, such as div#content h1 + div ol. That selector is read as, “Selects any ol element that is descended from a div when the div is the adjacent sibling of an h1 which is itself descended from a div whose id attribute has a value of content.”
1670 |
1671 | 和所有组合器一样，相邻兄弟选择器可以用于很复杂的选择器中，如`div#content h1 + div ol`。这个选择器是：“选择任何是`div`元素后代的`ol`元素，同时这个`div`元素是一个`h1`元素的紧邻兄弟元素，而这个`h1`元素是一个`id`属性值为`content`的`div`元素的子元素。”
1672 |
1673 | ### 2.5.5 选择跟随兄弟元素 Selecting Following Siblings
1674 |
1675 | Selectors Level 3 introduced a new sibling combinator called the general sibling combinator. This lets you select any element that follows another element when both elements share the same parent, represented using the tilde (~) combinator.
1676 |
1677 | Selectors Level 3 引入了一个新的兄弟组合器叫做**一般兄弟选择器**。这个组合器允许选择同一个父元素下，跟随（不一定是紧跟随）在某个元素后面的所有元素，使用波浪线符号（`~`）。
1678 |
1679 | As an example, to italicize any ol that follows an h2 and also shares a parent with the h2, you’d write h2 ~ol {font-style: italic;}. The two elements do not have to be adjacent siblings, although they can be adjacent and still match this rule. The result of applying this rule to the following markup is shown in Figure 2-22:
1680 |
1681 | 如下例，为同一个父元素下跟随在一个`h2`元素后面的任何`ol`元素设置斜体，可以写作`h2 ~ ol {font-style: italic;}`。两个`ol`元素不必都是紧邻兄弟，尽管是紧邻兄弟的话也会被这条规则匹配。效果见图 2-22.
1682 |
1683 | ```html
1684 | -
1638 |
- List item 1 1639 |
- List item 1 1640 |
- List item 1 1641 |
-
1644 |
- A list item 1645 |
- Another list item 1646 |
- Yet another list item 1647 |
1685 |
1701 | ```
1702 |
1703 | Subheadings
1686 |1687 | It is the case that not every heading can be a main heading. Some headings must be subheadings. Examples include: 1688 |
1689 |-
1690 |
- Headings that are less important 1691 |
- Headings that are subsidiary to more important headlines 1692 |
- Headings that like to be dominated 1693 |
Let's restate that for the record:
1695 |-
1696 |
- Headings that are less important 1697 |
- Headings that are subsidiary to more important headlines 1698 |
- Headings that like to be dominated 1699 |
1704 | 
1705 |
1706 |
1705 | 图 2-22：选择跟随兄弟元素
1707 | 1708 | As you can see, both ordered lists are italicized. That’s because both of them are ol elements that follow an h2 with which they share a parent (the div). 1709 | 1710 | 如图所示，两个有序列表都是斜体，因为两个`ol`元素都在`h2`元素后面，且它们（三个）共有一个父元素（`div`）。 1711 | 1712 | ## 2.6 伪类选择器 Pseudo-Class Selectors 1713 | 1714 | Things get really interesting with pseudo-class selectors. These selectors let you assign styles to what are, in effect, phantom classes that are inferred by the state of certain elements, or markup patterns within the document, or even by the state of the document itself. 1715 | 1716 | **伪类选择器**非常有趣，它们是一些根据元素状态变化而产生作用的幽灵类。伪类选择器可以根据某些确定元素的状态、文档中的标记模式甚至文档本身的状态选择元素并添加样式。 1717 | 1718 | The phrase “phantom classes” might seem a little odd, but it really is the best way to think of how pseudo-classes work. For example, suppose you wanted to highlight every other row of a data table. You could do that by marking up every other row something like `class="even"` and then writing CSS to highlight rows with that class —or (as we’ll soon see) you could use a pseudo-class selector to achieve the same effect, and through very similar means. 1719 | 1720 | “幽灵类”的说法可能看起来有点怪，但这个词非常贴切地体现了伪类的工作方式。例如，假如你想要把一个数据表格每隔一行设置为高亮，你可以每隔一行在行元素上加一个`class="even"`，然后写一段 CSS 把`class`值有`even`的行设置为高亮。但是你也可以使用伪类选择器更简便地实现相同的效果，后面会很快看到它的用法。 1721 | 1722 | ### 2.6.1 组合伪类 Combining Pseudo-Classes 1723 | 1724 | Before we start, a word about chaining. CSS makes it possible to combine (“chain”) pseudo-classes together. For example, you can make unvisited links red when they’re hovered and visited links maroon when they’re hovered: 1725 | 1726 | 在开始之前，先提一下“链式”。CSS 允许（链式）组合伪类选择器，例如，当鼠标停留在（`hover`）一个未访问过的链接（``）上时，将其设置为红色，当鼠标停留在已经访问过的链接上时,将其设置为栗色： 1727 | 1728 | ```css 1729 | a:link:hover { 1730 | color: red; 1731 | } 1732 | a:visited:hover { 1733 | color: maroon; 1734 | } 1735 | ``` 1736 | 1737 | The order you specify doesn’t actually matter; you could also write a:hover:link to the same effect as a:link:hover. It’s also possible to assign separate hover styles to unvisited and visited links that are in another language—for example, German: 1738 | 1739 | （伪类的）顺序无关紧要，`a:hover:link`和`a:link:hover`的效果是一样的。同样的，可以为特定语言的不同状态的链接设置不同的样式，例如德语： 1740 | 1741 | ```css 1742 | a:link:hover:lang(de) { 1743 | color: gray; 1744 | } 1745 | a:visited:hover:lang(de) { 1746 | color: silver; 1747 | } 1748 | ``` 1749 | 1750 | Be careful not to combine mutually exclusive pseudo-classes. For example, a link cannot be both visited and unvisited, so a:link:visited doesn’t make any sense and will never match anything. 1751 | 1752 | 注意不要组合互斥的伪类，例如，一个链接不可能既是访问过的又是没访问过的，所以`a:link:visited`没有任何意义，它并不会匹配任何东西。 1753 | 1754 | ### 2.6.2 结构性伪类 Structural Pseudo-Classes 1755 | 1756 | 大部分伪类都是结构性的，既它们是与文档的标记结构相关的。大部分伪类由标签内的结构决定，例如某个伪类选择器选择（某个文档片段中的）第三个段落（`p`）。其他一些选择器允许你处理特定类型的元素。所有的伪类都以一个冒号（`:`）开头，没有例外，而且它们可以出现在选择器的任何位置。 1757 | 1758 | 在开始之前，关于伪类有一点需要明确：伪类永远只指向他们关联的元素，而不是其他元素。这点似乎非常明显而没有必要特意强调，之所以要明确它，是因为在实际使用中，有一些结构型伪类常常被错误地当成后代元素的描述符。 1759 | 1760 | 为了进一步说明这点，我想分享一则我个人的轶事。2003 年，我的大女儿，也是我的第一个孩子，出生了。我在网上公布了这个消息（就像你们会做的一样^\_^）。许多人回复我表示祝贺，并讲了一些 CSS 的小幽默，许多人用了选择器`#ericmeyer:first-child.`。问题是这个选择器选择的是我，而且只有当我是我父母的第一个孩子的时候才会选择我（巧了，我还真是）。如果要选择我的第一个孩子，选择器应该是`#ericmeyer > :first-child`。 1761 | 1762 | 这种混淆是可以理解的，这就是为何我会在这里提到它，后面的章节我们会经常想起它。只要记住，伪类的作用是给它们绑定的元素添加一些“影子类”，就不容易犯（前面的）错误了。 1763 | 1764 | 1765 | 1766 | ### 选择根元素 Dynamic Pseudo-Classes 1767 | 1768 | 这是结构简单性的精髓：伪类选择器`:root`选择文档的根元素。在 HTML 中，根元素**永远是**`html`元素。在为 XML 语言添加样式时，这个选择器会非常有用，因为在不同的语言中根元素可能不同。例如，在 RSS 2.0 中，根元素是`rss`。即使在一种语言（甚至是一个文档）里，也可能会使用不止一个根元素。 1769 | 1770 | 图 1-23 展示了一个给 HTML 中的根元素添加样式的例子： 1771 | 1772 | ```css 1773 | :root { 1774 | border: 10px dotted gray; 1775 | } 1776 | body { 1777 | border: 10px solid black; 1778 | } 1779 | ``` 1780 | 1781 |  1782 | 1783 | _图 1-23：设置根元素样式_ 1784 | 1785 | 当然，在 HTML 文档中，可以直接选择`html`元素，不需要使用`:root`伪类。这两个选择器在特度方面有差异，我们将在第 3 章讨论。 1786 | 1787 | #### 选择空元素 1788 | 1789 | 使用伪类`:empty`，可以选择任何没有子节点的元素——没有任何类型的子元素：**包含**文本节点，包括文字和空白。这有助于筛除 CMS 生成的没有填进任何实际内容的元素。因此，`p:empty {display: none;}`将会让所有空的段落不再显示。 1790 | 1791 | 注意，一个元素如果要被`:empty`匹配，它必须（从解析的角度看）是真正空的——没有空白、可见内容，或后代元素。在下面的元素中，只有第一个和最后一个会被`p:empty`匹配。 1792 | 1793 | ```html 1794 | 1795 | 1796 | 1797 | 1798 | ``` 1799 | 1800 | 第二个和第三个段落不会匹配`:empty`，因为它们不是空的：它们各自包含一个空格和一个换行符，都会被当做文本节点，因此不是空状态。最后一个段落能够匹配，因为注释既不会被当成内容，也不会被当成空白。但是如果在注释的任何一侧添加一个空格或者换行，`p:empty`将不再匹配它。 1801 | 1802 | 你可能会试着为所有空元素设置样式，像这样：`*:empty {display: none;}`，但是这里有个潜在的陷阱：`:empty`会匹配 HTML 的空元素，如`img`和`input`，甚至会匹配`textarea`，除非你为`textarea`元素插入了一些默认文本。因此，从匹配元素的角度来说，`img`和`img:empty`是一样的（它们在特度上有区别，我们将在下一章讨论）。 1803 | 1804 | ```html 1805 |
1806 | 1807 | 1808 | 1809 | ``` 1810 | 1811 | _**到 2017 年底，`:empty`是唯一一个在匹配元素的时候考虑文本节点的 CSS 选择器。所有 Selectors Level 3 的其他选择器都只考虑元素节点，而完全忽略文本节点——例如，前面讨论过的兄弟组合器**_ 1812 | 1813 | ### UI-State Pseudo-Classes 1814 | 1815 | ### The :target Pseudo-Class 1816 | 1817 | ### The :lang Pseudo-Class 1818 | 1819 | ### The Negation Pseudo-Class 1820 | 1821 | ## 2.7 Pseudo-Element Selectors 1822 | 1823 | ### Styling the First Letter 1824 | 1825 | ### Styling the First Line 1826 | 1827 | ### Restrictions on ::first-letter and ::first-line 1828 | 1829 | ### Styling (or Creating) Content Before and After Elements 1830 | 1831 | ## 2.8 小结 Summary 1832 | 1833 | By using selectors based on the document’s language, authors can create CSS rules that apply to a large number of similar elements just as easily as they can construct rules that apply in very narrow circumstances. The ability to group together both selectors and rules keeps stylesheets compact and flexible, which incidentally leads to smaller file sizes and faster download times. 1834 | 1835 | 通过使用基于文档语言的选择器，作者可以创建适用于大量相似元素的 CSS 规则，就像他们可以轻松地构建适用于非常狭窄环境的规则一样。将选择器和规则组合在一起的能力使样式表更紧凑、更灵活，这也顺便带来了更小的文件大小和更快的下载时间。 1836 | 1837 | Selectors are the one thing that user agents usually must get right because the inability to correctly interpret selectors pretty much prevents a user agent from using CSS at all. On the flip side, it’s crucial for authors to correctly write selectors because errors can prevent the user agent from applying the styles as intended. An integral part of correctly understanding selectors and how they can be combined is a strong grasp of how selectors relate to document structure and how mechanisms—such as inheritance and the cascade itself—come into play when determining how an element will be styled. 1838 | 1839 | 选择器是用户代理通常必须正确处理的一件事情，因为无法正确解释选择器很大程度上阻碍了用户代理使用 CSS。另一方面，对于作者来说，正确地编写选择器是至关重要的，因为错误可能会阻止用户代理按预期应用样式。正确理解选择器以及如何组合选择器的一个重要部分是深入了解选择器与文档结构的关系，以及在确定元素的样式时如何使用机制(如继承和级联本身)。 1840 | -------------------------------------------------------------------------------- /docs/ch20.md: -------------------------------------------------------------------------------- 1 | # 第 20 章 Media-Dependent 风格 Media-Dependent Styles 2 | 3 | ## 20.1 Defining Media-Dependent Styles 4 | 5 | ### Basic Media Queries 6 | 7 | ### Complex Media Queries 8 | 9 | ## 20.2 Paged Media 10 | 11 | ### Print Styles 12 | 13 | ## 20.3 Summary 14 | -------------------------------------------------------------------------------- /docs/ch3.md: -------------------------------------------------------------------------------- 1 | # 第 3 章 特异性和级联 Specificity and the Cascade 2 | 3 | Chapter 2 showed how document structure and CSS selectors allow you to apply a wide variety of styles to elements. Knowing that every valid document generates a structural tree, you can create selectors that target elements based on their ancestors, attributes, sibling elements, and more. The structural tree is what allows selectors to function and is also central to a similarly crucial aspect of CSS: inheritance. 4 | 5 | 第 2 章介绍了文档结构和 CSS 选择器如何允许您将各种样式应用于元素。知道每个有效的文档都会生成一个结构树，您就可以创建选择器，根据它们的祖先、属性、兄弟元素等来定位元素。结构树允许选择器起作用，并且对于 CSS 的一个同样重要的方面:继承也很重要。 6 | 7 | `Inheritance` is the mechanism by which some property values are passed on from an element to its descendants. When determining which values should apply to an element, a user agent must consider not only inheritance but also the `specificity` of the declarations, as well as the origin of the declarations themselves. This process of consideration is what’s known as the `cascade`. We will explore the interrelation between these three mechanisms—specificity, inheritance, and the cascade—in this chapter, but the difference between the latter two can be summed up this way: choosing the result of `h1 {color: red; color: blue;}` is the cascade; making a `span` inside the h1 blue is inheritance. 8 | 9 | “继承”是将一些属性值从一个元素传递给它的后代的机制。在决定哪些值应该应用于元素时，用户代理不仅必须考虑继承，还必须考虑声明的“特殊性”，以及声明本身的来源。这种思考的过程被称为“级联”。在本章中，我们将探讨这三种机制——特异性、继承性和级联——之间的相互关系，但后两者之间的区别可以这样总结:选择“h1 {color: red;颜色:蓝色;}'是级联;在 h1 蓝色区域内创建“span”是继承。 10 | 11 | Above all, regardless of how abstract things may seem, keep going! Your perseverance will be rewarded. 12 | 13 | 最重要的是，不管事情看起来多么抽象，都要坚持下去!你的坚持会得到回报的。 14 | 15 | ## 3.1 Specificity 16 | 17 | You know from Chapter 2 that you can select elements using a wide variety of means. In fact, it’s possible that the same element could be selected by two or more rules, each with its own selector. Let’s consider the following three pairs of rules. Assume that each pair will match the same element: 18 | 19 | 从第 2 章可以知道，可以使用多种方法选择元素。实际上，相同的元素可以由两个或多个规则选择，每个规则都有自己的选择器。让我们考虑以下三对规则。假设每一对将匹配相同的元素: 20 | 21 | ```css 22 | h1 { 23 | color: red; 24 | } 25 | body h1 { 26 | color: green; 27 | } 28 | h2.grape { 29 | color: purple; 30 | } 31 | h2 { 32 | color: silver; 33 | } 34 | html > body table tr[id='totals'] td ul > li { 35 | color: maroon; 36 | } 37 | li#answer { 38 | color: navy; 39 | } 40 | ``` 41 | 42 | Only one of the two rules in each pair can win out, since the matched elements can be only one color or the other. How do we know which one will win? 43 | 44 | 因为匹配的元素只能是一种颜色，所以每对中只有一个规则可以胜出。我们怎么知道哪一个会赢? 45 | 46 | The answer is found in the `specificity` of each selector. For every rule, the user agent evaluates the specificity of the selector and attaches it to each declaration in the rule.When an element has two or more conflicting property declarations, the one with the highest specificity will win out. 47 | 48 | 答案就在每个选择器的“特异性”中。对于每个规则，用户代理评估选择器的特异性，并将其附加到规则中的每个声明。当一个元素有两个或多个相互冲突的属性声明时，具有最高特异性的属性声明将胜出。 49 | 50 | This isn’t the whole story in terms of conflict resolution. All style conflict resolution (including specificity) is handled by the cascade, which has its own section later in this chapter (“The Cascade” on page 106). 51 | 52 | 这并不是解决冲突的全部。所有风格冲突的解决(包括特性)都由 cascade 来处理，它在本章后面有自己的一节(“cascade”在 106 页)。 53 | 54 | A selector’s specificity is determined by the components of the selector itself. A specificity value can be expressed in four parts, like this: `0,0,0,0`. The actual specificity of a selector is determined as follows: 55 | 56 | 选择器的特异性由选择器本身的组件决定。特异性值可以表达为四个部分，像这样:' 0,0,0,0 '。选择器的实际特异性确定如下: 57 | 58 | - For every ID attribute value given in the selector, add `0,1,0,0`. 59 | - For every class attribute value, attribute selection, or pseudo-class given in the selector, add `0,0,1,0`. 60 | - For every element and pseudo-element given in the selector, add `0,0,0,1`. CSS2 contradicted itself as to whether pseudo-elements had any specificity at all, but CSS2.1 made it clear that they do, and this is where they belong. 61 | - Combinators and the universal selector do not contribute anything to the specificity. 62 | 63 | --- 64 | 65 | -对于选择器中给定的每个 ID 属性值，添加' 0,1,0,0 '。 -对于选择器中给出的每个类属性值、属性选择或伪类，添加' 0,0,1,0 '。 -对于选择器中给出的每个元素和伪元素，添加' 0,0,0,1 '。关于伪元素是否具有特异性，CSS2 自相矛盾，但 CSS2.1 明确表示它们具有特异性，这就是伪元素的归属。 -组合子和通用选择器对特异性没有任何贡献。 66 | 67 | For example, the following rules’ selectors result in the indicated specificities: 68 | 69 | 例如，下列规则的选择器会导致指定的特性: 70 | 71 | ```css 72 | h1 { 73 | color: red; 74 | } /* specificity = 0,0,0,1 */ 75 | p em { 76 | color: purple; 77 | } /* specificity = 0,0,0,2 */ 78 | .grape { 79 | color: purple; 80 | } /* specificity = 0,0,1,0 */ 81 | *.bright { 82 | color: yellow; 83 | } /* specificity = 0,0,1,0 */ 84 | p.bright em.dark { 85 | color: maroon; 86 | } /* specificity = 0,0,2,2 */ 87 | #id216 { 88 | color: blue; 89 | } /* specificity = 0,1,0,0 */ 90 | div#sidebar *[href] { 91 | color: silver; 92 | } /* specificity = 0,1,1,1 */ 93 | ``` 94 | 95 | Given a case where an `em` element is matched by both the second and fifth rules in this example, that element will be maroon because the fifth rule’s specificity outweighs the second’s. 96 | 97 | 在本例中，如果一个' em '元素同时与第二个和第五个规则匹配，则该元素将是褐红色的，因为第五个规则的特殊性超过第二个规则。 98 | 99 | As an exercise, let’s return to the pairs of rules from earlier in the section and fill in the specificities: 100 | 101 | 作为练习，让我们回到本节前面的规则对，并填写具体内容: 102 | 103 | ```css 104 | h1 { 105 | color: red; 106 | } /* 0,0,0,1 */ 107 | body h1 { 108 | color: green; 109 | } /* 0,0,0,2 (winner)*/ 110 | h2.grape { 111 | color: purple; 112 | } /* 0,0,1,1 (winner) */ 113 | h2 { 114 | color: silver; 115 | } /* 0,0,0,1 */ 116 | html > body table tr[id='totals'] td ul > li { 117 | color: maroon; 118 | } /* 0,0,1,7 */ 119 | li#answer { 120 | color: navy; 121 | } /* 0,1,0,1 122 | (winner) */ 123 | ``` 124 | 125 | I’ve indicated the winning rule in each pair; in each case, it’s because the specificity is higher. Notice how they’re sorted. In the second pair, the selector h2.grape wins because it has an extra `1: 0,0,1,1` beats out `0,0,0,1`. In the third pair, the second rule wins because `0,1,0,1`wins out over `0,0,1,7`. In fact, the specificity value `0,0,1,0` will win out over the value `0,0,0,13`. 126 | 127 | 我已经指出了每一对的获胜规则;在每种情况下，这是因为特异性更高。注意它们是如何排序的。在第二对中，选择器 h2。葡萄赢了，因为它有一个额外的' 1,0,0,1,1 '击败了' 0,0,0,1 '。在第三对中，第二个规则胜出，因为' 0,1,0,1 '胜过' 0,0,1,7 '。事实上，特异性值‘0,0,1,0’将战胜‘0,0,0,13’。 128 | 129 | This happens because the values are sorted from left to right. A specificity of `1,0,0,0` will win out over any specificity that begins with a `0`, no matter what the rest of the numbers might be. So `0,1,0,1` wins over `0,0,1,7` because the `1` in the first value’s second position beats out the `0` in the second value’s second position. 130 | 131 | 这是因为值是从左到右排序的。“1,0,0,0”的特异性胜过任何以“0”开头的特异性，不管其他数字是什么。所以' 0,1,0,1 '胜过' 0,0,1,7 '因为第一个值的第二个位置的' 1 '击败了第二个值的第二个位置的' 0 '。 132 | 133 | ### 3.1.1 Declarations and Specificity 134 | 135 | Once the specificity of a selector has been determined, the specificity value will be conferred on all of its associated declarations. Consider this rule: 136 | 137 | 一旦选择器的特异性被确定，特异性值将被赋给它的所有相关声明。考虑这条规则: 138 | 139 | ```css 140 | h1 { 141 | color: silver; 142 | background: black; 143 | } 144 | ``` 145 | 146 | For specificity purposes, the user agent must treat the rule as if it were “ungrouped” into separate rules. Thus, the previous example would become: 147 | 148 | 出于特定的目的，用户代理必须将规则视为“未分组”为单独的规则。因此，前面的例子将变成: 149 | 150 | ```css 151 | h1 { 152 | color: silver; 153 | } 154 | h1 { 155 | background: black; 156 | } 157 | ``` 158 | 159 | Both have a specificity of `0,0,0,1`, and that’s the value conferred on each declaration. The same splitting-up process happens with a grouped selector as well. Given the rule: 160 | 161 | 两者都具有' 0,0,0,1 '的特异性，这是赋予每个声明的值。分组选择器也会发生相同的拆分过程。鉴于规则: 162 | 163 | ```css 164 | h1, 165 | h2.section { 166 | color: silver; 167 | background: black; 168 | } 169 | ``` 170 | 171 | the user agent treats it if it were the following: 172 | 173 | 用户代理处理如下: 174 | 175 | ```css 176 | h1 { 177 | color: silver; 178 | } /* 0,0,0,1 */ 179 | h1 { 180 | background: black; 181 | } /* 0,0,0,1 */ 182 | h2.section { 183 | color: silver; 184 | } /* 0,0,1,1 */ 185 | h2.section { 186 | background: black; 187 | } /* 0,0,1,1 */ 188 | ``` 189 | 190 | This becomes important in situations where multiple rules match the same element and some of the declarations clash. For example, consider these rules: 191 | 192 | 这在多个规则匹配相同的元素和一些声明冲突的情况下变得非常重要。例如，考虑以下规则: 193 | 194 | ```css 195 | h1 + p { 196 | color: black; 197 | font-style: italic; 198 | } /* 0,0,0,2 */ 199 | p { 200 | color: gray; 201 | background: white; 202 | font-style: normal; 203 | } /* 0,0,0,1 */ 204 | *.aside { 205 | color: black; 206 | background: silver; 207 | } /* 0,0,1,0 */ 208 | ``` 209 | 210 | When applied to the following markup, the content will be rendered as shown in Figure 3-1: 211 | 212 | 当应用于以下标记时，内容将呈现如图 3-1 所示: 213 | 214 | ```html 215 |
Greetings!
216 |217 | It's a fine way to start a day, don't you think? 218 |
219 |220 | There are many ways to greet a person, but the words are not as important as the act of greeting itself. 221 |
222 |Salutations!
223 |224 | There is nothing finer than a hearty welcome from one's fellow man. 225 |
226 |227 | Although a thick and juicy hamburger with bacon and mushrooms runs a close second. 228 |
229 | ``` 230 | 231 |
232 | 
233 |
234 |
233 | 图 3-1：How different rules affect a document
235 | 236 | In every case, the user agent determines which rules match a given element, calculates all of the associated declarations and their specificities, determines which rules win out, and then applies the winners to the element to get the styled result. These machinations must be performed on every element, selector, and declaration. Fortunately, the user agent does it all automatically. This behavior is an important component of the cascade, which we will discuss later in this chapter. 237 | 238 | 在每种情况下，用户代理确定哪些规则匹配给定的元素，计算所有关联的声明及其特殊性，确定哪些规则胜出，然后将胜出者应用于元素以获得样式化的结果。这些机制必须在每个元素、选择器和声明上执行。幸运的是，用户代理会自动完成这一切。这种行为是级联的一个重要组成部分，我们将在本章后面讨论。 239 | 240 | ### 3.1.2 Universal Selector Specificity 241 | 242 | The universal selector does not contribute to specificity. In other words, it has a specificity of `0,0,0,0`, which is different than having no specificity (as we’ll discuss in “Inheritance” on page 103). Therefore, given the following two rules, a paragraph descended from a div will be black, but all other elements will be gray: 243 | 244 | 通用选择器不会增加特异性。换句话说，它具有' 0,0,0,0 '的特异性，这不同于没有特异性(正如我们将在 103 页的“继承”中讨论的那样)。因此，根据以下两条规则，从 div 派生的段落将是黑色的，但所有其他元素都是灰色的: 245 | 246 | ```css 247 | div p { 248 | color: black; 249 | } /* 0,0,0,2 */ 250 | * { 251 | color: gray; 252 | } /* 0,0,0,0 */ 253 | ``` 254 | 255 | As you might expect, this means the specificity of a selector that contains a universal selector along with other selectors is not changed by the presence of the universal selector. The following two selectors have exactly the same specificity: 256 | 257 | 正如您可能期望的那样，这意味着包含通用选择器和其他选择器的选择器的特殊性不会因为通用选择器的存在而改变。以下两个选择器具有完全相同的特异性: 258 | 259 | ```css 260 | div p /* 0,0,0,2 */ 261 | body * strong /* 0,0,0,2 */ 262 | ``` 263 | 264 | Combinators, by comparison, have no specificity at all—not even zero specificity. Thus, they have no impact on a selector’s overall specificity. 265 | 266 | 相比之下，组合子根本没有特异性——甚至没有特异性。因此，它们对选择器的总体特异性没有影响。 267 | 268 | ### 3.1.3 ID and Attribute Selector Specificity 269 | 270 | It’s important to note the difference in specificity between an ID selector and an attribute selector that targets an `id` attribute. Returning to the third pair of rules in the example code, we find: 271 | 272 | 注意 ID 选择器和以' ID '属性为目标的属性选择器之间的区别非常重要。回到示例代码中的第三对规则，我们发现: 273 | 274 | ```css 275 | html > body table tr[id='totals'] td ul > li { 276 | color: maroon; 277 | } /* 0,0,1,7 */ 278 | li#answer { 279 | color: navy; 280 | } /* 0,1,0,1 (wins) */ 281 | ``` 282 | 283 | The ID selector (`#answer`) in the second rule contributes `0,1,0,0` to the overall specificity of the selector. In the first rule, however, the attribute selector (`[id="totals"]`) contributes `0,0,1,0` to the overall specificity. Thus, given the following rules, the element with an `id` of `meadow` will be green: 284 | 285 | 第二条规则中的 ID 选择器(' #answer ')将' 0,1,0,0 '贡献给选择器的总体特异性。然而，在第一个规则中，属性选择器(' [id="汇总"]')对总体特异性的贡献是' 0,0,1,0 '。因此，根据以下规则，id 为“meadow”的元素为绿色: 286 | 287 | ```css 288 | #meadow { 289 | color: green; 290 | } /* 0,1,0,0 */ 291 | *[id='meadow'] { 292 | color: red; 293 | } /* 0,0,1,0 */ 294 | ``` 295 | 296 | ### 3.1.4 Inline Style Specificity 297 | 298 | So far, we’ve only seen specificities that begin with a zero, so you may be wondering why it’s there at all. As it happens, that first zero is reserved for inline style declarations, which trump any other declaration’s specificity. Consider the following rule and markup fragment: 299 | 300 | 到目前为止，我们只看到以 0 开头的特殊情况，所以您可能想知道它为什么会出现。实际上，第一个零是为内联样式声明保留的，它胜过任何其他声明的特殊性。考虑以下规则和标记片段: 301 | 302 | ```css 303 | h1 { 304 | color: red; 305 | } 306 | ``` 307 | 308 | ```html 309 |The Meadow Party
310 | ``` 311 | 312 | Given that the rule is applied to the `h1` element, you would still probably expect the text of the `h1` to be green. This happens because every inline declaration has a specificity of `1,0,0,0`. 313 | 314 | 假设规则应用于“h1”元素，您可能仍然期望“h1”的文本是绿色的。这是因为每个内联声明都有一个' 1,0,0,0 '的特异性。 315 | 316 | This means that even elements with `id` attributes that match a rule will obey the inline style declaration. Let’s modify the previous example to include an `id`: 317 | 318 | 这意味着即使具有与规则匹配的' id '属性的元素也将遵循内联样式声明。让我们修改前面的例子，包括一个“id”: 319 | 320 | ```css 321 | h1#meadow { 322 | color: red; 323 | } 324 | ``` 325 | 326 | ```html 327 |The Meadow Party
328 | ``` 329 | 330 | Thanks to the inline declaration’s specificity, the text of the `h1` element will still be green. 331 | 332 | 由于内联声明的特殊性，“h1”元素的文本仍然是绿色的。 333 | 334 | ### 3.1.5 Importance 335 | 336 | Sometimes, a declaration is so important that it outweighs all other considerations. CSS calls these `important declarations` (for hopefully obvious reasons) and lets you mark them by inserting `!important` just before the terminating semicolon in a declaration: 337 | 338 | 有时候，一个声明是如此重要，以至于它超过了所有其他的考虑。CSS 调用这些“重要的声明”(希望原因显而易见)，并允许您通过插入“!”在声明中结束分号之前: 339 | 340 | ```css 341 | p.dark { 342 | color: #333 !important; 343 | background: white; 344 | } 345 | ``` 346 | 347 | Here, the color value of `#333` is marked `!important`, whereas the background value of `white` is not. If you wish to mark both declarations as important, each declaration needs its own `!important` marker: 348 | 349 | 在这里，' #333 '的颜色值被标记为' !“重要”，而“白色”的背景值不重要。如果您希望将两个声明都标记为重要的，那么每个声明都需要有自己的' !重要的标志: 350 | 351 | ```css 352 | p.dark { 353 | color: #333 !important; 354 | background: white !important; 355 | } 356 | ``` 357 | 358 | You must place `!important` correctly, or the declaration may be invalidated. `!important` always goes at the end of the declaration, just before the semicolon. This placement is especially important—no pun intended—when it comes to properties that allow values containing multiple keywords, such as `font`: 359 | 360 | 你必须放' !重要’，否则声明无效。”!重要的总是在声明的结尾，分号的前面。当涉及到允许包含多个关键字(如“font”)的值的属性时，这个位置尤其重要(没有双关语的意思): 361 | 362 | ```css 363 | p.light { 364 | color: yellow; 365 | font: smaller Times, serif !important; 366 | } 367 | ``` 368 | 369 | If `!important` were placed anywhere else in the `font` declaration, the entire declaration would likely be invalidated and none of its styles applied. 370 | 371 | 如果”!如果“important”被放置在“font”声明的其他位置，则整个声明可能会无效，并且其样式也不适用。 372 | 373 | I realize that to those of you who come from a programming background, the syntax of this token instinctively translates to “not important.” For whatever reason, the bang (`!`) was chosen as the delimiter for important tokens, and it does `not` mean “not” in CSS, no matter how many other languages give it that very meaning. This association is unfortunate, but we’re stuck with it. 374 | 375 | 我意识到，对于那些有编程背景的人来说，这个标记的语法本能地解释为“不重要”。不管出于什么原因，bang(' ! ')被选为重要标记的分隔符，而它在 CSS 中并不是' not '的意思，不管有多少其他语言赋予它这种含义。这种联系是不幸的，但我们却深陷其中。 376 | 377 | Declarations that are marked `!important` do not have a special specificity value, but are instead considered separately from non-important declarations. In effect, all `!important` declarations are grouped together, and specificity conflicts are resolved relatively within that group. Similarly, all non-important declarations are considered together, with any conflicts within the non-important group are resolved using specificity. Thus, in any case where an important and a non-important declaration conflict, the important declaration `always` wins. 378 | 379 | 标记为' !“重要”没有特殊的具体值，而是与不重要的声明分开考虑。实际上，所有的!重要的声明被分组在一起，而具体的冲突在该组内相对解决。类似地，所有不重要的声明都放在一起考虑，不重要的组中的任何冲突都使用特殊性来解决。因此，在重要的和不重要的声明冲突的任何情况下，重要的声明“总是”获胜。 380 | 381 | Figure 3-2 illustrates the result of the following rules and markup fragment: 382 | 383 | 图 3-2 演示了以下规则和标记片段的结果: 384 | 385 | ```css 386 | h1 { 387 | font-style: italic; 388 | color: gray !important; 389 | } 390 | .title { 391 | color: black; 392 | background: silver; 393 | } 394 | * { 395 | background: black !important; 396 | } 397 | ``` 398 | 399 | ```html 400 |NightWing
401 | ``` 402 | 403 |
404 | 
405 |
406 |
405 | 图 3-2：Important rules always win
407 | 408 | Important declarations and their handling are discussed in more detail in “The Cascade” on page 106. 409 | 410 | 重要的声明及其处理将在 106 页的“级联”中详细讨论。 411 | 412 | ## 3.2 Inheritance 413 | 414 | As important as specificity may be to understanding how declarations are applied to a document, another key concept is `inheritance`. Inheritance is the mechanism by which some styles are applied not only to a specified element, but also to its descendants. If a color is applied to an `h1` element, for example, then that color is applied to all text inside the `h1`, even the text enclosed within child elements of that `h1`: 415 | 416 | 与特异性一样重要的是理解声明如何应用于文档，另一个关键概念是“继承”。继承是一种机制，通过这种机制，某些样式不仅应用于指定的元素，还应用于它的后代元素。例如，如果一个颜色应用于一个“h1”元素，那么这个颜色就应用于“h1”内的所有文本，即使是“h1”的子元素中包含的文本: 417 | 418 | ```css 419 | h1 { 420 | color: gray; 421 | } 422 | ``` 423 | 424 | ```html 425 |Meerkat Central
426 | ``` 427 | 428 | Both the ordinary `h1` text and the `em` text are colored gray because the `em` element inherits the value of `color` from the `h1`. If property values could not be inherited by descendant elements, the `em` text would be black, not gray, and we’d have to color the elements separately. 429 | 430 | 普通的“h1”文本和“em”文本都是灰色的，因为“em”元素从“h1”继承了“color”的值。如果属性值不能被后代元素继承，' em '文本将是黑色的，而不是灰色的，我们将不得不分别为元素上色。 431 | 432 | Consider an unordered list. Let’s say we apply a style of `color: gray;` for `ul` elements: 433 | 434 | 考虑一个无序列表。假设我们对“ul”元素应用“color: gray”样式: 435 | 436 | ```css 437 | ul { 438 | color: gray; 439 | } 440 | ``` 441 | 442 | We expect that style applied to a `ul` will also be applied to its list items, and also to any content of those list items. Thanks to inheritance, that’s exactly what happens, as Figure 3-3 demonstrates. 443 | 444 | 我们期望应用于“ul”的样式也将应用于它的列表项，以及那些列表项的任何内容。多亏了继承，这正是所发生的，如图 3-3 所示。 445 | 446 |
447 | 
448 |
449 |
448 | 图 3-3：Inheritance of styles
450 | 451 | It’s easier to see how inheritance works by turning to a tree diagram of a document. Figure 3-4 shows the tree diagram for a very simple document containing two lists: one unordered and the other ordered. 452 | 453 | 通过查看文档的树形图，很容易看出继承是如何工作的。图 3-4 显示了一个非常简单的文档的树形图，其中包含两个列表:一个是无序的，另一个是有序的。 454 | 455 |
456 | 
457 |
458 |
457 | 图 3-4：A simple tree diagram
459 | 460 | When the declaration `color: gray;` is applied to the `ul` element, that element takes on that declaration. The value is then propagated down the tree to the descendant elements and continues on until there are no more descendants to inherit the value. Values are `never` propagated upward; that is, an element never passes values up to its ancestors. 461 | 462 | 当将声明“color: gray;”应用于“ul”元素时，该元素接受该声明。然后，该值向下传播到树的后代元素，并继续下去，直到没有更多的后代继承该值。值“从不”向上传播;也就是说，元素从不将值传递给它的祖先。 463 | 464 | There is an exception to the upward propagation rule in HTML: background styles applied to the `body` element can be passed to the `html` element, which is the document’s root element and therefore defines its canvas. This only happens if the `body` element has a defined background and the html element does not. 465 | 466 | HTML 中的向上传播规则有一个例外:应用于“body”元素的背景样式可以传递给“HTML”元素，后者是文档的根元素，因此定义了它的画布。只有当“body”元素有一个定义好的背景，而 html 元素没有时，才会发生这种情况。 467 | 468 | Inheritance is one of those things about CSS that is so basic that you almost never think about it unless you have to. However, you should still keep a couple of things in mind. 469 | 470 | 继承是 CSS 的基本特性之一，除非迫不得已，否则你几乎不会考虑它。然而，你仍然应该记住一些事情。 471 | 472 | First, note that many properties are not inherited—generally in order to avoid undesirable outcomes. For example, the property `border` (which is used to set borders on elements) does not inherit. A quick glance at Figure 3-5 reveals why this is the case. If borders were inherited, documents would become much more cluttered—unless the author took the extra effort to turn off the inherited borders. 473 | 474 | 首先，注意许多属性没有被继承——通常是为了避免不希望的结果。例如，属性“border”(用于设置元素的边框)不会继承。快速浏览一下图 3-5 就会发现为什么会这样。如果边界是继承的，文档就会变得更加混乱——除非作者付出额外的努力来关闭继承的边界。 475 | 476 |
477 | 
478 |
479 |
478 | 图 3-5：Why borders aren’t inherited
480 | 481 | As it happens, most of the box-model properties—including margins, padding, backgrounds, and borders—are not inherited for the same reason. After all, you likely wouldn’t want all of the links in a paragraph to inherit a 30-pixel left margin from their parent element! 482 | 483 | 凑巧的是，大多数 box-model 属性——包括边距、填充、背景和边界——都不是出于相同的原因继承的。毕竟，您可能不希望段落中的所有链接都继承父元素的 30 像素左距! 484 | 485 | Second, inherited values have no specificity at all, not even zero specificity. This seems like an academic distinction until you work through the consequences of the lack of inherited specificity. Consider the following rules and markup fragment and compare them to the result shown in Figure 3-6: 486 | 487 | 其次，遗传值完全没有特异性，甚至没有特异性。这似乎是一个学术上的区别，直到你解决了缺乏遗传特异性的后果。考虑以下规则和标记片段，并将它们与图 3-6 所示的结果进行比较: 488 | 489 | ```css 490 | * { 491 | color: gray; 492 | } 493 | h1#page-title { 494 | color: black; 495 | } 496 | ``` 497 | 498 | ```html 499 |Meerkat Central
500 |501 | Welcome to the best place on the web for meerkat information! 502 |
503 | ``` 504 | 505 |
506 | 
507 |
508 |
507 | 图 3-6：Zero specificity defeats no specificity
509 | 510 | Since the universal selector applies to all elements and has zero specificity, its color declaration’s value of `gray` wins out over the inherited value of `black`, which has no specificity at all. Therefore, the `em` element is rendered gray instead of black. 511 | 512 | 由于通用选择器适用于所有元素，并且没有任何特异性，所以它的颜色声明的值“gray”胜过了继承的值“black”，后者没有任何特异性。因此，' em '元素呈现为灰色而不是黑色。 513 | 514 | This example vividly illustrates one of the potential problems of using the universal selector indiscriminately. Because it can match `any` element, the universal selector often has the effect of short-circuiting inheritance. This can be worked around, but it’s usually more sensible to avoid the problem in the first place by not using the universal selector indiscriminately. 515 | 516 | 这个例子生动地说明了不加选择地使用通用选择器的一个潜在问题。因为它可以匹配“任何”元素，所以通用选择器通常具有短路继承的效果。这是可以解决的，但通常更明智的做法是首先通过不随意使用通用选择器来避免这个问题。 517 | 518 | The complete lack of specificity for inherited values is not a trivial point. For example, assume that a style sheet has been written such that all text in a “toolbar” is to be white on black: 519 | 520 | 继承值完全缺乏特异性并不是一个微不足道的问题。例如，假设一个样式表被编写成“工具栏”中的所有文本都是黑白的: 521 | 522 | ```css 523 | #toolbar { 524 | color: white; 525 | background: black; 526 | } 527 | ``` 528 | 529 | This will work so long as the element with an `id` of `toolbar` contains nothing but plain text. If, however, the text within this element is all hyperlinks (`a` elements), then the user agent’s styles for hyperlinks will take over. In a web browser, this means they’ll likely be colored blue, since the browser’s internal style sheet probably contains an entry like this: 530 | 531 | 只要带有“工具栏”的“id”的元素只包含纯文本，此方法就有效。但是，如果此元素中的文本是所有超链接(' a '元素)，则用户代理的超链接样式将接管。在 web 浏览器中，这意味着它们可能是蓝色的，因为浏览器的内部样式表可能包含这样的条目: 532 | 533 | ```css 534 | a:link { 535 | color: blue; 536 | } 537 | ``` 538 | 539 | To overcome this problem, you must declare something like this: 540 | 541 | 要解决这个问题，您必须声明如下内容: 542 | 543 | ```css 544 | #toolbar { 545 | color: white; 546 | background: black; 547 | } 548 | #toolbar a:link { 549 | color: white; 550 | } 551 | ``` 552 | 553 | By targeting a rule directly at the `a` elements within the toolbar, you’ll get the result shown in Figure 3-7. 554 | 555 | 通过将规则直接指向工具栏中的“a”元素，您将得到如图 3-7 所示的结果。 556 | 557 |
558 | 
559 |
560 |
559 | 图 3-7：Directly assigning styles to the relevant elements
561 | 562 | Another way to get the same result is to use the value `inherit`, covered in the previous chapter. We can alter the previous example like so: 563 | 564 | 获得相同结果的另一种方法是使用前一章介绍的值“inherit”。我们可以这样改变前面的例子: 565 | 566 | ```css 567 | #toolbar { 568 | color: white; 569 | background: black; 570 | } 571 | #toolbar a:link { 572 | color: inherit; 573 | } 574 | ``` 575 | 576 | This also leads to the result shown in Figure 3-7, because the value of `color` is explicitly inherited thanks to an assigned rule whose selector has specificity. 577 | 578 | 这也导致了图 3-7 所示的结果，因为“color”的值是显式继承的，这要归功于一个指定的规则，其选择器具有特殊性。 579 | 580 | ## 3.3 The Cascade 581 | 582 | Throughout this chapter, we’ve skirted one rather important issue: what happens when two rules of equal specificity apply to the same element? How does the browser resolve the conflict? For example, consider the following rules: 583 | 584 | 在这一章中，我们回避了一个非常重要的问题:当两个同样特殊的规则应用于相同的元素时会发生什么?浏览器如何解决冲突?例如，考虑以下规则: 585 | 586 | ```css 587 | h1 { 588 | color: red; 589 | } 590 | h1 { 591 | color: blue; 592 | } 593 | ``` 594 | 595 | Which one wins? Both have a specificity of `0,0,0,1`, so they have equal weight and should both apply. That can’t be the case because the element can’t be both red and blue. So which will it be? 596 | 597 | 哪一个赢了?两者的特异性都是' 0,0,0,1 '，所以它们的权重相等，应该都适用。这不可能，因为元素不能同时是红色和蓝色的。那么会是哪一个呢? 598 | 599 | At last, the name “Cascading Style Sheets” makes sense: CSS is based on a method of causing styles to `cascade` together, which is made possible by combining inheritance and specificity with a few rules. The cascade rules for CSS are: 600 | 601 | 最后，“层叠样式表”这个名称是有意义的:CSS 是基于一种使样式“层叠”在一起的方法，这是通过将继承和特定与一些规则相结合而实现的。CSS 的级联规则是: 602 | 603 | 1. Find all rules that contain a selector that matches a given element. 604 | 2. Sort all declarations applying to the given element by explicit weight. Those rules marked `!important` have a higher weight than those that are not. 605 | 3. Sort all declarations applying to the given element by origin. There are three basic origins: author, reader, and user agent. Under normal circumstances, the author’s styles win out over the reader’s styles. `!important` reader styles are stronger than any other styles, including `!important` author styles. Both author and reader styles override the user agent’s default styles. 606 | 4. Sort all declarations applying to the given element by `specificity`. Those elements with a higher specificity have more weight than those with lower specificity. 607 | 5. Sort all declarations applying to the given element by `order`. The later a declaration appears in the style sheet or document, the more weight it is given. Declarations that appear in an imported style sheet are considered to come before all declarations within the style sheet that imports them. 608 | 609 | --- 610 | 611 | 1. 查找包含与给定元素匹配的选择器的所有规则。 612 | 2. 按显式权重对应用于给定元素的所有声明排序。那些规则写着‘!重要的比不重要的更重要。 613 | 3. 按来源对应用于给定元素的所有声明进行排序。有三个基本的来源:作者、读者和用户代理。通常情况下，作者的风格胜过读者的风格。”!重要的“读者风格比任何其他风格都强，包括”!重要的作者风格。author 和 reader 样式都会覆盖用户代理的默认样式。 614 | 4. 根据“特异性”对应用于给定元素的所有声明进行排序。特异性高的元素比特异性低的元素具有更高的权重。 615 | 5. 将应用于给定元素的所有声明按“order”排序。声明在样式表或文档中出现得越晚，它的权重就越大。出现在导入的样式表中的声明被认为位于导入它们的样式表中的所有声明之前。 616 | 617 | To be perfectly clear about how this all works, let’s consider some examples that illustrate the last four of the five cascade rules. 618 | 619 | 为了更清楚地了解这一切是如何工作的，让我们考虑一些示例，这些示例演示了 5 个级联规则中的最后 4 个。 620 | 621 | Some later CSS modules add more origins to the basic list of three; for example, the animation and transition origins. These are not covered here, but are addressed in the chapters on those topics. 622 | 623 | 一些后来的 CSS 模块添加了更多的起源到基本列表三个;例如，动画和过渡的起源。这里不涉及这些内容，但是在关于这些主题的章节中会提到。 624 | 625 | ### 3.3.1 Sorting by Weight and Origin 626 | 627 | If two rules apply to an element, and one is marked `!important`, the important rule wins out: 628 | 629 | 如果两个规则应用于一个元素，其中一个被标记为' !重要的规则胜出: 630 | 631 | ```css 632 | p { 633 | color: gray !important; 634 | } 635 | ``` 636 | 637 | ```html 638 |Well, hello there!
639 | ``` 640 | 641 | Despite the fact that there is a color assigned in the `style` attribute of the paragraph, the `!important` rule wins out, and the paragraph is gray. This gray is inherited by the `em` element as well. 642 | 643 | 尽管在段落的' style '属性中分配了一个颜色，' !重要规则胜出，段落是灰色的。这个灰色也由' em '元素继承。 644 | 645 | Note that if an `!important` is added to the inline style, then `it` will be the winner. Thus, given the following, the paragraph (and its descendant element) will be black: 646 | 647 | 注意，如果一个' !“重要”被添加到内联样式中，那么“它”将成为赢家。因此，在下面的情况下，该段(及其后代元素)将是黑色的: 648 | 649 | ```css 650 | p { 651 | color: gray !important; 652 | } 653 | ``` 654 | 655 | ```html 656 |Well, hello there!
657 | ``` 658 | 659 | In situations where the explicit weight is the same, the origin of a rule is considered. If an element is matched by normal-weight styles in both the author’s style sheet and the reader’s style sheet, then the author’s styles are used. For example, assume that the following styles come from the indicated origins: 660 | 661 | 在显式权值相同的情况下，将考虑规则的起源。如果一个元素在作者的样式表和读者的样式表中都匹配了正常权重的样式，那么就使用作者的样式。例如，假设以下样式来自指定的起源: 662 | 663 | ```css 664 | p em { 665 | color: black; 666 | } /* author's style sheet */ 667 | p em { 668 | color: yellow; 669 | } /* reader's style sheet */ 670 | ``` 671 | 672 | In this case, emphasized text within paragraphs is colored black, not yellow, because normal-weight author styles win out over normal-weight reader styles. However, if both rules are marked `!important`, the situation changes: 673 | 674 | 在这种情况下，段落中强调的文本是黑色的，而不是黄色的，因为正常重量的作者风格胜过正常重量的读者风格。然而，如果两个规则都标记了' !重要的是，情况发生了变化: 675 | 676 | ```css 677 | p em { 678 | color: black !important; 679 | } /* author's style sheet */ 680 | p em { 681 | color: yellow !important; 682 | } /* reader's style sheet */ 683 | ``` 684 | 685 | Now the emphasized text in paragraphs will be yellow, not black. 686 | 687 | 现在段落中强调的文本将是黄色的，而不是黑色的。 688 | 689 | As it happens, the user agent’s default styles—which are often influenced by the user preferences—are figured into this step. The default style declarations are the least influential of all. Therefore, if an author-defined rule applies to anchors (e.g., declaring them to be `white`), then this rule overrides the user agent’s defaults. 690 | 691 | 在此过程中，用户代理的默认样式(通常受用户偏好的影响)将被考虑到此步骤中。默认样式声明的影响是最小的。因此，如果作者定义的规则适用于锚(例如，声明它们为“白色”)，那么该规则将覆盖用户代理的默认值。 692 | 693 | To sum up, there are five basic levels to consider in terms of declaration weight. In order of most to least weight, these are: 694 | 695 | 综上所述，在申报权重方面，有五个基本层次需要考虑。按重量从大到小依次为: 696 | 697 | 1. Reader important declarations 698 | 2. Author important declarations 699 | 3. Author normal declarations 700 | 4. Reader normal declarations 701 | 5. User agent declarations 702 | 703 | --- 704 | 705 | 1. 读者重要声明 706 | 2. 作者重要声明 707 | 3. 正常的作者声明 708 | 4. 读者正常的声明 709 | 5. 用户代理声明 710 | 711 | Authors typically need to worry about only the first four weight levels, since anything declared by an author will win out over the user agent’s styles. 712 | 713 | 作者通常只需要担心前四个权重级别，因为作者声明的任何内容都会胜过用户代理的样式。 714 | 715 | ### 3.3.2 Sorting by Specificity 716 | 717 | If conflicting declarations apply to an element and they all have the same explicit weight and origin, they should be sorted by specificity, with the most specific declaration winning out, like this: 718 | 719 | 如果相互冲突的声明适用于某个元素，并且它们都具有相同的显式权重和来源，则应该根据特异性对它们进行排序，最具体的声明胜出，如下所示: 720 | 721 | ```css 722 | p#bright { 723 | color: silver; 724 | } 725 | p { 726 | color: black; 727 | } 728 | ``` 729 | 730 | ```html 731 |Well, hello there!
732 | ``` 733 | 734 | Given the rules shown, the text of the paragraph will be silver, as illustrated in Figure 3-8. Why? Because the specificity of `p#bright (0,1,0,1)` overrode the specificity of `p (0,0,0,1)`, even though the latter rule comes later in the style sheet. 735 | 736 | 根据所示的规则，段落的文本将是银色的，如图 3-8 所示。为什么?因为“p#bright(0,1,0,1)”的特殊性覆盖了“p(0,0,0,1)”的特殊性，即使后者的规则在样式表中稍后出现。 737 | 738 |
739 | 
740 |
741 |
740 | 图 3-8：Higher specificity wins out over lower specificity
742 | 743 | ### 3.3.3 Sorting by Order 744 | 745 | Finally, if two rules have exactly the same explicit weight, origin, and specificity, then the one that occurs later in the style sheet wins out. Let’s return to our earlier example, where we find the following two rules in the document’s style sheet: 746 | 747 | 最后，如果两个规则具有完全相同的显式权重、来源和特性，则样式表中稍后出现的规则胜出。让我们回到前面的例子，我们在文档的样式表中发现了以下两个规则: 748 | 749 | ```css 750 | h1 { 751 | color: red; 752 | } 753 | h1 { 754 | color: blue; 755 | } 756 | ``` 757 | 758 | In this case, the value of `color` for all `h1` elements in the document will be `blue`, not `red`. This is because the two rules are tied with each other in terms of explicit weight and origin, and the selectors have equal specificity, so the last one declared is the winner. 759 | 760 | 在本例中，文档中所有“h1”元素的“color”值将为“blue”，而不是“red”。这是因为这两个规则在显式权重和来源方面是相互关联的，并且选择器具有相同的特异性，所以最后一个声明的规则是赢家。 761 | 762 | So what happens if rules from completely separate style sheets conflict? For example, suppose the following: 763 | 764 | 那么，如果来自完全不同的样式表的规则发生冲突，会发生什么情况呢?例如，假设如下: 765 | 766 | ```css 767 | @import url(basic.css); 768 | h1 { 769 | color: blue; 770 | } 771 | ``` 772 | 773 | What if `h1 {color: red;}` appears in `basic.css`? The entire contents of `basic.css` are treated as if they were pasted into the style sheet at the point where the @import occurs. Thus, any rule contained in the document’s style sheet occurs later than those from the `@import`. If they tie in terms of explicit weight and specificity, the document’s style sheet contains the winner. Consider the following: 774 | 775 | 如果“h1 {color: red;}”出现在“basic.css”中会怎样?基本的全部内容。css '被视为在@import 发生的地方被粘贴到样式表中。因此，文档样式表中包含的任何规则出现的时间都晚于“@import”中的规则。如果它们在显式的权重和特异性方面相匹配，则文档的样式表将包含获胜者。考虑以下: 776 | 777 | ```css 778 | p em { 779 | color: purple; 780 | } /* from imported style sheet */ 781 | p em { 782 | color: gray; 783 | } /* rule contained within the document */ 784 | ``` 785 | 786 | In this case, the second rule shown wins out over the imported rule because it was the last one specified. 787 | 788 | 在本例中，显示的第二个规则胜过导入的规则，因为它是最后一个指定的规则。 789 | 790 | Order sorting is the reason behind the often-recommended ordering of link styles. The recommendation is that you array your link styles in the order link-visited-focushover-active, or LVFHA, like this: 791 | 792 | 排序是经常推荐的链接样式排序背后的原因。建议您按照链接访问-focushover-active 或 LVFHA 的顺序排列链接样式，如下所示: 793 | 794 | ```css 795 | a:link { 796 | color: blue; 797 | } 798 | a:visited { 799 | color: purple; 800 | } 801 | a:focus { 802 | color: green; 803 | } 804 | a:hover { 805 | color: red; 806 | } 807 | a:active { 808 | color: orange; 809 | } 810 | ``` 811 | 812 | Thanks to the information in this chapter, you now know that the specificity of all of these selectors is the same: `0,0,1,0`. Because they all have the same explicit weight, origin, and specificity, the last one that matches an element will win out. An unvisited link that is being “clicked” or otherwise activated, such as via the keyboard, is matched by four of the rules—`:link`, `Lfocus`, `:hover`, and `:active`—so the last one of those four will win out. Given the LVFHA ordering, `:active` will win, which is likely what the author intended. 813 | 814 | 由于本章中的信息，您现在知道所有这些选择器的特性都是相同的:' 0,0,1,0 '。因为它们都具有相同的显式权重、来源和特异性，所以最后一个匹配元素的元素将胜出。正在被“点击”或通过键盘等方式激活的未访问链接，由“:链接”、“Lfocus”、“:hover”和“:active”这四个规则匹配，因此这四个规则中的最后一个将胜出。考虑到 LVFHA 的顺序，“:active”将胜出，这可能是作者的本意。 815 | 816 | Assume for a moment that you decide to ignore the common ordering and alphabetize your link styles instead. This would yield: 817 | 818 | 假设您暂时决定忽略常见的顺序，而是按字母顺序排列链接样式。这将产生: 819 | 820 | ```css 821 | a:active { 822 | color: orange; 823 | } 824 | a:focus { 825 | color: green; 826 | } 827 | a:hover { 828 | color: red; 829 | } 830 | a:link { 831 | color: blue; 832 | } 833 | a:visited { 834 | color: purple; 835 | } 836 | ``` 837 | 838 | Given this ordering, no link would ever show `:hover`, `:focus`, or `:active` styles because the `:link` and `:visited` rules come after the other three. Every link must be either visited or unvisited, so those styles will always override the others. 839 | 840 | 按照这种顺序，没有一个链接会显示“:hover”、“:focus”或“:active”样式，因为“:link”和“:visited”规则位于其他三个样式之后。每个链接都必须访问或未访问，因此这些样式总是覆盖其他样式。 841 | 842 | Let’s consider a variation on the LVFHA order that an author might want to use. In this ordering, only unvisited links will get a hover style; visited links do not. Both visited and unvisited links will get an active style: 843 | 844 | 让我们考虑一下作者可能希望使用的 LVFHA 顺序的变体。在这个顺序，只有未访问的链接将得到一个悬停样式;访问过的链接没有。已访问和未访问的链接将得到一个积极的风格: 845 | 846 | ```css 847 | a:link { 848 | color: blue; 849 | } 850 | a:hover { 851 | color: red; 852 | } 853 | a:visited { 854 | color: purple; 855 | } 856 | a:focus { 857 | color: green; 858 | } 859 | a:active { 860 | color: orange; 861 | } 862 | ``` 863 | 864 | Such conflicts arise only when all the states attempt to set the same property. If each state’s styles address a different property, then the order does not matter. In the following case, the link styles could be given in any order and would still function as intended: 865 | 866 | 只有当所有国家都试图设置相同的财产时，才会出现这种冲突。如果每个状态的样式处理不同的属性，则顺序无关紧要。在以下情况下，链接样式可以以任何顺序给出，并且仍然可以正常工作: 867 | 868 | ```css 869 | a:link { 870 | font-weight: bold; 871 | } 872 | a:visited { 873 | font-style: italic; 874 | } 875 | a:focus { 876 | color: green; 877 | } 878 | a:hover { 879 | color: red; 880 | } 881 | a:active { 882 | background: yellow; 883 | } 884 | ``` 885 | 886 | You may also have realized that the order of the `:link` and `:visited` styles doesn’t matter. You could order the styles LVFHA or VLFHA with no ill effect. 887 | 888 | 您可能也已经意识到':link '和':visited '样式的顺序并不重要。你可以订购风格 LVFHA 或 VLFHA 没有不良影响。 889 | 890 | The ability to chain pseudo-classes together eliminates all these worries. The following could be listed in any order without any overrides: 891 | 892 | 将伪类链接在一起的能力消除了所有这些担忧。以下可以按任意顺序列出，不存在任何覆盖: 893 | 894 | ```css 895 | a:link { 896 | color: blue; 897 | } 898 | a:visited { 899 | color: purple; 900 | } 901 | a:link:hover { 902 | color: red; 903 | } 904 | a:visited:hover { 905 | color: gray; 906 | } 907 | ``` 908 | 909 | Because each rule applies to a unique set of link states, they do not conflict. Therefore, changing their order will not change the styling of the document. The last two rules do have the same specificity, but that doesn’t matter. A hovered unvisited link will not be matched by the rule regarding hovered visited links, and vice versa. If we were to add active-state styles, then order would start to matter again. Consider: 910 | 911 | 因为每个规则都适用于一组惟一的链接状态，所以它们并不冲突。因此，更改它们的顺序不会改变文档的样式。最后两条规则确实具有相同的特殊性，但这并不重要。未访问的已悬停链接将不匹配有关已悬停已访问链接的规则，反之亦然。如果我们要添加活动状态样式，那么顺序将再次开始起作用。考虑: 912 | 913 | ```css 914 | a:link { 915 | color: blue; 916 | } 917 | a:visited { 918 | color: purple; 919 | } 920 | a:link:hover { 921 | color: red; 922 | } 923 | a:visited:hover { 924 | color: gray; 925 | } 926 | a:link:active { 927 | color: orange; 928 | } 929 | a:visited:active { 930 | color: silver; 931 | } 932 | ``` 933 | 934 | If the active styles were moved before the hover styles, they would be ignored. Again, this would happen due to specificity conflicts. The conflicts could be avoided by adding more pseudo-classes to the chains, like this: 935 | 936 | 如果活动样式在悬停样式之前移动，它们将被忽略。同样，这也会由于特殊性冲突而发生。可以通过向链中添加更多的伪类来避免冲突，如下所示: 937 | 938 | ```css 939 | a:link:hover:active { 940 | color: orange; 941 | } 942 | a:visited:hover:active { 943 | color: silver; 944 | } 945 | ``` 946 | 947 | This does have the effect of raising the specificity of the selectors—both have a specificity value of `0,0,3,1`—but they don’t conflict because the actual selection states are mutually exclusive. A link can’t be an unvisited hovered active link `and` an unvisited hovered active link: only one of the two rules will match, and the styles applied accordingly. 948 | 949 | 这确实有提高选择器的特异性的效果—两者的特异性值都是' 0,0,3,1 '—但是它们并不冲突，因为实际的选择状态是相互排斥的。链接不能被一个,并且在积极联系”和“一个盘旋,并且积极链接:只有一个两个规则的匹配,并相应的样式应用。 950 | 951 | ### 3.3.4 Non-CSS Presentational Hints 952 | 953 | It is possible that a document will contain presentational hints that are not CSS—for example, the `font` element. Such presentational hints are treated as if they have a specificity of `0` and appear at the `beginning` of the author’s stylesheet. Such presentation hints will be overridden by any author or reader styles, but not by the user agent’s styles. In CSS3, presentational hints from outside CSS are treated as if they belong to the user agent’s stylesheet, presumably at the end (although as of this writing, the specification doesn’t say). 954 | 955 | 文档可能包含非 css 的表示提示—例如，“font”元素。这样的表示提示被视为具有“0”的特殊性，并出现在作者样式表的“开始”处。这种表示提示将被任何作者或读者样式覆盖，但不会被用户代理的样式覆盖。在 CSS3 中，来自 CSS 外部的表示提示被视为属于用户代理的样式表，可能是在最后(尽管在撰写本文时，规范没有说明)。 956 | 957 | ## 3.4 Summary 958 | 959 | Perhaps the most fundamental aspect of Cascading Style Sheets is the cascade itself—the process by which conflicting declarations are sorted out and from which the final document presentation is determined. Integral to this process is the specificity of selectors and their associated declarations, and the mechanism of inheritance. 960 | 961 | 级联样式表最基本的方面可能是级联本身，这是一个处理相互冲突的声明并确定最终文档表示的过程。这个过程中不可或缺的是选择器及其相关声明的特殊性，以及继承机制。 962 | -------------------------------------------------------------------------------- /docs/ch4.md: -------------------------------------------------------------------------------- 1 | # 第 4 章 值和单位 Values and Units 2 | 3 | ## 4.1 Keywords, Strings, and Other Text Values 4 | 5 | ### Keywords 6 | 7 | ### Strings 8 | 9 | ### URLs 10 | 11 | ### Images 12 | 13 | ### Identifiers 14 | 15 | ## 4.2 Numbers and Percentages 16 | 17 | ### Integers 18 | 19 | ### Numbers 20 | 21 | ### Percentages 22 | 23 | ### Fractions 24 | 25 | ## 4.3 Distances 26 | 27 | ### Absolute Length Units 28 | 29 | ### Resolution Units 30 | 31 | ### Relative Length Units 32 | 33 | ## 4.4 Calculation values 34 | 35 | ## 4.5 Attribute Values 36 | 37 | ## 4.6 Color 38 | 39 | ### Named Colors 40 | 41 | ### Colors by RGB and RGBa 42 | 43 | ### Colors by HSL and HSLa 44 | 45 | ### Color Keywords 46 | 47 | ## 4.7 Angles 48 | 49 | ## 4.8 Time and Frequency 50 | 51 | ## 4.9 Position 52 | 53 | ## 4.10 Custom Values 54 | -------------------------------------------------------------------------------- /docs/ch6.md: -------------------------------------------------------------------------------- 1 | # 第 6 章 文本属性 Text Properties 2 | 3 | ## 6.1 Indentation and Inline Alignment 4 | 5 | ### Indenting Text 6 | 7 | ### Text Alignment 8 | 9 | ### Aligning the Last Line 10 | 11 | ## 6.2 Inline Alignment 12 | 13 | ### The Height of Lines 14 | 15 | ### Vertically Aligning Text 16 | 17 | ## 6.3 Word Spacing and Letter Spacing 18 | 19 | ### Word Spacing 20 | 21 | ### Letter Spacing 22 | 23 | ### Spacing and Alignment 24 | 25 | ## 6.4 Text Transformation 26 | 27 | ## 6.5 Text Decoration 28 | 29 | ### Weird Decorations 30 | 31 | ## 6.6 Text Rendering 32 | 33 | ## 6.7 Text Shadows 34 | 35 | ## 6.8 Handling Whitespace 36 | 37 | ### Setting Tab Sizes 38 | 39 | ## 6.9 Wrapping and Hyphenation 40 | 41 | ### Wrapping Text 42 | 43 | ## 6.10 Writing Modes 44 | 45 | ### Setting Writing Modes 46 | 47 | ### Changing Text Orientation 48 | 49 | ### Declaring Direction 50 | 51 | ## 6.11 Summary 52 | -------------------------------------------------------------------------------- /docs/ch8.md: -------------------------------------------------------------------------------- 1 | # 第 8 章 Padding, Borders, Outlines 和 Margins 2 | 3 | In the previous chapter, we talked about the basics of element display. In this chapter, we’ll look at the CSS properties and values you can use to change the specific appearance of elements that are displayed. These include the padding, borders, and margins around an element, as well as any outlines that may be added. 4 | 5 | 在前一章中，我们讨论了元素显示的基础知识。在本章中，我们将研究 CSS 属性和值，您可以使用它们来更改所显示元素的特定外观。这些包括元素周围的填充、边框和边距，以及可能添加的任何轮廓。 6 | 7 | ## 8.1 基本元素框 Basic Element Boxes 8 | 9 | As you may be aware, all document elements generate a rectangular box called the element box, which describes the amount of space that an element occupies in the layout of the document. Therefore, each box influences the position and size of other element boxes. For example, if the first element box in the document is an inch tall, then the next box will begin at least an inch below the top of the document. If the first element box is changed and made to be two inches tall, every following element box will shift downward an inch, and the second element box will begin at least two inches below the top of the document. 10 | 11 | 您可能已经注意到，所有文档元素都会生成一个名为 element box 的矩形框，它描述了一个元素在文档布局中所占的空间量。因此，每个盒子都会影响其他元素盒子的位置和大小。例如，如果文档中的第一个元素框是一英寸高，那么下一个框将在文档顶部以下至少一英寸处开始。如果将第一个元素框更改为 2 英寸高，那么下面的每个元素框将向下移动 1 英寸，而第二个元素框将从文档顶部以下至少 2 英寸处开始。 12 | 13 | By default, a visually rendered document is composed of a number of rectangular boxes that are distributed so that they don’t overlap. Also, within certain constraints, these boxes take up as little space as possible while still maintaining a sufficient separation to make clear which content belongs to which element. 14 | 15 | 默认情况下，可视化呈现的文档是由一些矩形框组成的，这些矩形框分布在不同的地方，这样它们就不会重叠。此外，在某些约束条件下，这些框占用尽可能少的空间，同时仍然保持足够的分离，以便明确哪些内容属于哪些元素。 16 | 17 | Boxes can overlap if they have been manually positioned, and visual overlap can occur if negative margins are used on normal-flow elements. 18 | 19 | 如果手动定位方框，它们可能会重叠;如果在正常流元素上使用负边距，则可能出现视觉重叠。 20 | 21 | In order to understand how margins, padding, and borders are handled, you must understand the box model, illustrated in Figure 8-1. 22 | 23 | 为了理解如何处理边距、填充和边框，您必须理解 box 模型，如图 8-1 所示。 24 | 25 | ### 宽度和高度 Width and Height 26 | 27 | It’s fairly common to explicitly define the width of an element, and historically much less common to explicitly define the height. By default, the width of an element is defined to be the distance from the left inner edge to the right inner edge, and the height is the distance from the inner top to the inner bottom. The properties that affect these distances are, unsurprisingly, called `height` and `width`. 28 | 29 | 显式定义元素的宽度相当常见，而在历史上显式定义元素的高度则少见得多。默认情况下，元素的宽度定义为从左内边缘到右内边缘的距离，而高度定义为从内顶部到内底部的距离。毫不奇怪，影响这些距离的属性被称为“高度”和“宽度”。 30 | 31 | One important note about these two properties: they don’t apply to inline nonreplaced elements. For example, if you try to declare a height and width for a hyperlink that’s in the normal flow and generates an inline box, CSS-conformant browsers must ignore those declarations. Assume that the following rule applies: 32 | 33 | 关于这两个属性有一点需要注意:它们不应用于内联的不可替换元素。例如，如果您试图为正常流中的超链接声明高度和宽度并生成内联框，符合 css 的浏览器必须忽略这些声明。假设以下规则适用: 34 | 35 | ```css 36 | a:link { 37 | color: red; 38 | background: silver; 39 | height: 15px; 40 | width: 60px; 41 | } 42 | ``` 43 | 44 | You’ll end up with red unvisited links on silver backgrounds whose height and width are determined by the content of the links. They will `not` have content areas that are 15 pixels tall by 60 pixels wide. If, on the other hand, you add a `display` value, such as `inline-block` or `block`, then `height` and `width` will set the height and width of the links’ content areas. 45 | 46 | 你会在银色背景上得到一个红色的未访问链接，它的高度和宽度是由链接的内容决定的。他们将“不”有 15 像素高 60 像素宽的内容区域。另一方面，如果您添加了一个“显示”值，例如“内联块”或“块”，那么“高度”和“宽度”将设置链接内容区域的高度和宽度。 47 | 48 | In the course of this chapter, we’ll usually keep the discussion simple by assuming that the height of an element is always calculated automatically. If an element is eight lines long, and each line is an eighth of an inch tall, then the height of the element is one inch. If it’s 10 lines tall, then the height is 1.25 inches. In either case, the height is determined by the content of the element, not by the author. It’s rarely the case that elements in the normal flow have a set height. 49 | 50 | 在本章的过程中，我们通常通过假设元素的高度总是自动计算来简化讨论。如果一个元素有 8 行，每一行都是 1/8 英寸高，那么元素的高度就是 1 英寸。如果是 10 行，那么高度是 1.25 英寸。在这两种情况下，高度是由元素的内容决定的，而不是由作者决定的。正常流中的元素很少有固定的高度。 51 | 52 | ## 8.2 Padding 53 | 54 | Just beyond the content area of an element, we find its padding, nestled between the content and any borders. The simplest way to set padding is by using the property padding. 55 | 56 | As you can see, this property accepts any length value, or a percentage value. So if you want all h2 elements to have 1 em of padding on all sides, it’s this easy (see Figure 8-2): 57 | 58 | ```css 59 | h2 { 60 | padding: 2em; 61 | background-color: silver; 62 | } 63 | ``` 64 | 65 | // 66 | 67 | As Figure 8-2 illustrates, the background of an element extends into the padding by default. If the background is transparent, this will create some extra transparent space around the element’s content, but any visible background will extend into the padding area (and beyond, as we’ll see in a later section). 68 | 69 | 如图 8-2 所示，默认情况下，元素的背景扩展到填充中。如果背景是透明的，这将在元素的内容周围创建一些额外的透明空间，但是任何可见的背景都将扩展到填充区域(以及其他区域，我们将在后面的小节中看到)。 70 | 71 | By default, elements have no padding. The separation between paragraphs, for example, has traditionally been enforced with margins alone (as we’ll see later on). It’s also the case that, without padding, the border of an element will come very close to the content of the element itself. Thus, when putting a border on an element, it’s usually a good idea to add some padding as well, as Figure 8-3 illustrates. 72 | 73 | ### 复制值 Replicating Values 74 | 75 | ### 单边 Padding Single-Side Padding 76 | 77 | ### Percentage Values and Padding 78 | 79 | ### Padding and Inline Elements 80 | 81 | ### Padding and Replaced Elements 82 | 83 | ## 8.3 Borders 84 | 85 | ### Borders with Style 86 | 87 | ### Border Widths 88 | 89 | ### Border Colors 90 | 91 | ### Shorthand Border Properties 92 | 93 | ### Global Borders 94 | 95 | ### Borders and Inline Elements 96 | 97 | ### Rounding Border Corners 98 | 99 | ### Image Borders 100 | 101 | ## 8.4 Outlines 102 | 103 | ### Outline Styles 104 | 105 | ### Outline Width 106 | 107 | ### Outline Color 108 | 109 | ### How They Are Different 110 | 111 | ## 8.5 Margins 112 | 113 | ### Length Values and Margins 114 | 115 | ### Percentages and Margins 116 | 117 | ### Single-Side Margin Properties 118 | 119 | ### Margin Collapsing 120 | 121 | ### Negative Margins 122 | 123 | ### Margins and Inline Elements 124 | 125 | ## 8.6 Summary 126 | -------------------------------------------------------------------------------- /docs/ch9.md: -------------------------------------------------------------------------------- 1 | # 第 9 章 颜色、背景和渐变 Colors, Backgrounds, and Gradients 2 | 3 | ## 9.1 Colors 4 | 5 | ### Foreground Colors 6 | 7 | ### Affecting Borders 8 | 9 | ### Affecting Form Elements 10 | 11 | ### Inheriting Color 12 | 13 | ## 9.2 Backgrounds 14 | 15 | ### Background Colors 16 | 17 | ### Clipping the Background 18 | 19 | ### Background Images 20 | 21 | ### Background Positioning 22 | 23 | ### Changing the Positioning Box 24 | 25 | ### Background Repeating (or Lack Thereof) 26 | 27 | ### Getting Attached 28 | 29 | ### Sizing Background Images 30 | 31 | ### Bringing It All Together 32 | 33 | ### Multiple Backgrounds 34 | 35 | ## 9.3 Gradients 36 | 37 | ### Linear Gradients 38 | 39 | ### Radial Gradients 40 | 41 | ### Manipulating Gradient Images 42 | 43 | ### Repeating Gradients 44 | 45 | ## 9.4 Box Shadows 46 | 47 | ## 9.5 Summary 48 | -------------------------------------------------------------------------------- /docs/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/cover.png -------------------------------------------------------------------------------- /docs/figure2-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-1.png -------------------------------------------------------------------------------- /docs/figure2-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-10.png -------------------------------------------------------------------------------- /docs/figure2-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-11.png -------------------------------------------------------------------------------- /docs/figure2-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-12.png -------------------------------------------------------------------------------- /docs/figure2-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-13.png -------------------------------------------------------------------------------- /docs/figure2-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-14.png -------------------------------------------------------------------------------- /docs/figure2-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-15.png -------------------------------------------------------------------------------- /docs/figure2-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-16.png -------------------------------------------------------------------------------- /docs/figure2-17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-17.png -------------------------------------------------------------------------------- /docs/figure2-18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-18.png -------------------------------------------------------------------------------- /docs/figure2-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-19.png -------------------------------------------------------------------------------- /docs/figure2-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-2.png -------------------------------------------------------------------------------- /docs/figure2-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-20.png -------------------------------------------------------------------------------- /docs/figure2-21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-21.png -------------------------------------------------------------------------------- /docs/figure2-22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-22.png -------------------------------------------------------------------------------- /docs/figure2-23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-23.png -------------------------------------------------------------------------------- /docs/figure2-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-24.png -------------------------------------------------------------------------------- /docs/figure2-25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-25.png -------------------------------------------------------------------------------- /docs/figure2-26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-26.png -------------------------------------------------------------------------------- /docs/figure2-27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-27.png -------------------------------------------------------------------------------- /docs/figure2-28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-28.png -------------------------------------------------------------------------------- /docs/figure2-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-3.png -------------------------------------------------------------------------------- /docs/figure2-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-4.png -------------------------------------------------------------------------------- /docs/figure2-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-5.png -------------------------------------------------------------------------------- /docs/figure2-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-6.png -------------------------------------------------------------------------------- /docs/figure2-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-7.png -------------------------------------------------------------------------------- /docs/figure2-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-8.png -------------------------------------------------------------------------------- /docs/figure2-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figure2-9.png -------------------------------------------------------------------------------- /docs/figures/figure3-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure3-1.png -------------------------------------------------------------------------------- /docs/figures/figure3-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure3-2.png -------------------------------------------------------------------------------- /docs/figures/figure3-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure3-3.png -------------------------------------------------------------------------------- /docs/figures/figure3-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure3-4.png -------------------------------------------------------------------------------- /docs/figures/figure3-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure3-5.png -------------------------------------------------------------------------------- /docs/figures/figure3-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure3-6.png -------------------------------------------------------------------------------- /docs/figures/figure3-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure3-7.png -------------------------------------------------------------------------------- /docs/figures/figure3-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure3-8.png -------------------------------------------------------------------------------- /docs/figures/figure5-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-1.png -------------------------------------------------------------------------------- /docs/figures/figure5-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-10.png -------------------------------------------------------------------------------- /docs/figures/figure5-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-11.png -------------------------------------------------------------------------------- /docs/figures/figure5-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-12.png -------------------------------------------------------------------------------- /docs/figures/figure5-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-13.png -------------------------------------------------------------------------------- /docs/figures/figure5-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-14.png -------------------------------------------------------------------------------- /docs/figures/figure5-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-15.png -------------------------------------------------------------------------------- /docs/figures/figure5-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-16.png -------------------------------------------------------------------------------- /docs/figures/figure5-17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-17.png -------------------------------------------------------------------------------- /docs/figures/figure5-18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-18.png -------------------------------------------------------------------------------- /docs/figures/figure5-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-19.png -------------------------------------------------------------------------------- /docs/figures/figure5-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-2.png -------------------------------------------------------------------------------- /docs/figures/figure5-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-20.png -------------------------------------------------------------------------------- /docs/figures/figure5-21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-21.png -------------------------------------------------------------------------------- /docs/figures/figure5-22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-22.png -------------------------------------------------------------------------------- /docs/figures/figure5-23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-23.png -------------------------------------------------------------------------------- /docs/figures/figure5-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-24.png -------------------------------------------------------------------------------- /docs/figures/figure5-25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-25.png -------------------------------------------------------------------------------- /docs/figures/figure5-26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-26.png -------------------------------------------------------------------------------- /docs/figures/figure5-27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-27.png -------------------------------------------------------------------------------- /docs/figures/figure5-28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-28.png -------------------------------------------------------------------------------- /docs/figures/figure5-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-29.png -------------------------------------------------------------------------------- /docs/figures/figure5-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-3.png -------------------------------------------------------------------------------- /docs/figures/figure5-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-30.png -------------------------------------------------------------------------------- /docs/figures/figure5-31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-31.png -------------------------------------------------------------------------------- /docs/figures/figure5-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-32.png -------------------------------------------------------------------------------- /docs/figures/figure5-33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-33.png -------------------------------------------------------------------------------- /docs/figures/figure5-34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-34.png -------------------------------------------------------------------------------- /docs/figures/figure5-35.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-35.png -------------------------------------------------------------------------------- /docs/figures/figure5-36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-36.png -------------------------------------------------------------------------------- /docs/figures/figure5-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-4.png -------------------------------------------------------------------------------- /docs/figures/figure5-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-5.png -------------------------------------------------------------------------------- /docs/figures/figure5-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-6.png -------------------------------------------------------------------------------- /docs/figures/figure5-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-7.png -------------------------------------------------------------------------------- /docs/figures/figure5-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-8.png -------------------------------------------------------------------------------- /docs/figures/figure5-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure5-9.png -------------------------------------------------------------------------------- /docs/figures/figure7-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-1.png -------------------------------------------------------------------------------- /docs/figures/figure7-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-10.png -------------------------------------------------------------------------------- /docs/figures/figure7-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-11.png -------------------------------------------------------------------------------- /docs/figures/figure7-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-12.png -------------------------------------------------------------------------------- /docs/figures/figure7-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-13.png -------------------------------------------------------------------------------- /docs/figures/figure7-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-14.png -------------------------------------------------------------------------------- /docs/figures/figure7-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-15.png -------------------------------------------------------------------------------- /docs/figures/figure7-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-16.png -------------------------------------------------------------------------------- /docs/figures/figure7-17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-17.png -------------------------------------------------------------------------------- /docs/figures/figure7-18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-18.png -------------------------------------------------------------------------------- /docs/figures/figure7-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-19.png -------------------------------------------------------------------------------- /docs/figures/figure7-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-2.png -------------------------------------------------------------------------------- /docs/figures/figure7-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-20.png -------------------------------------------------------------------------------- /docs/figures/figure7-21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-21.png -------------------------------------------------------------------------------- /docs/figures/figure7-22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-22.png -------------------------------------------------------------------------------- /docs/figures/figure7-23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-23.png -------------------------------------------------------------------------------- /docs/figures/figure7-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-24.png -------------------------------------------------------------------------------- /docs/figures/figure7-25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-25.png -------------------------------------------------------------------------------- /docs/figures/figure7-26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-26.png -------------------------------------------------------------------------------- /docs/figures/figure7-27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-27.png -------------------------------------------------------------------------------- /docs/figures/figure7-28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-28.png -------------------------------------------------------------------------------- /docs/figures/figure7-29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-29.png -------------------------------------------------------------------------------- /docs/figures/figure7-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-3.png -------------------------------------------------------------------------------- /docs/figures/figure7-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-30.png -------------------------------------------------------------------------------- /docs/figures/figure7-31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-31.png -------------------------------------------------------------------------------- /docs/figures/figure7-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-32.png -------------------------------------------------------------------------------- /docs/figures/figure7-33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-33.png -------------------------------------------------------------------------------- /docs/figures/figure7-34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-34.png -------------------------------------------------------------------------------- /docs/figures/figure7-35.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-35.png -------------------------------------------------------------------------------- /docs/figures/figure7-36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-36.png -------------------------------------------------------------------------------- /docs/figures/figure7-37.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-37.png -------------------------------------------------------------------------------- /docs/figures/figure7-38.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-38.png -------------------------------------------------------------------------------- /docs/figures/figure7-39.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-39.png -------------------------------------------------------------------------------- /docs/figures/figure7-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-4.png -------------------------------------------------------------------------------- /docs/figures/figure7-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-40.png -------------------------------------------------------------------------------- /docs/figures/figure7-41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-41.png -------------------------------------------------------------------------------- /docs/figures/figure7-42.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-42.png -------------------------------------------------------------------------------- /docs/figures/figure7-43.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-43.png -------------------------------------------------------------------------------- /docs/figures/figure7-44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-44.png -------------------------------------------------------------------------------- /docs/figures/figure7-45.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-45.png -------------------------------------------------------------------------------- /docs/figures/figure7-46.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-46.png -------------------------------------------------------------------------------- /docs/figures/figure7-47.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-47.png -------------------------------------------------------------------------------- /docs/figures/figure7-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-48.png -------------------------------------------------------------------------------- /docs/figures/figure7-49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-49.png -------------------------------------------------------------------------------- /docs/figures/figure7-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-5.png -------------------------------------------------------------------------------- /docs/figures/figure7-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-50.png -------------------------------------------------------------------------------- /docs/figures/figure7-51.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-51.png -------------------------------------------------------------------------------- /docs/figures/figure7-52.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-52.png -------------------------------------------------------------------------------- /docs/figures/figure7-53.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-53.png -------------------------------------------------------------------------------- /docs/figures/figure7-54.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-54.png -------------------------------------------------------------------------------- /docs/figures/figure7-55.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-55.png -------------------------------------------------------------------------------- /docs/figures/figure7-56.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-56.png -------------------------------------------------------------------------------- /docs/figures/figure7-57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-57.png -------------------------------------------------------------------------------- /docs/figures/figure7-58.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-58.png -------------------------------------------------------------------------------- /docs/figures/figure7-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-6.png -------------------------------------------------------------------------------- /docs/figures/figure7-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-7.png -------------------------------------------------------------------------------- /docs/figures/figure7-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-8.png -------------------------------------------------------------------------------- /docs/figures/figure7-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gdut-wj/CSS-The-Definitive-Guide-4th-zh/c0b6a22692ebee8f9cd46ce9424f8d8866a89ba0/docs/figures/figure7-9.png -------------------------------------------------------------------------------- /docs/pushtest.md: -------------------------------------------------------------------------------- 1 | 提交测试！！！ -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "docs:dev": "vuepress dev docs", 4 | "docs:build": "vuepress build docs" 5 | } 6 | } 7 | --------------------------------------------------------------------------------