36 |
37 | 这个标记片段只包含元素名称和属性。 除非你把它指向外部内容（这里是由`src`属性指定的图片），这个元素不会显示任何内容。 如果把它指向有效的图片文件，则图片将被放置在文档中。反之，它将不显示任何内容，或者，浏览器将在这里放置一个“损坏图像”的占位符。
38 |
39 | 类似地，`input`元素也会被替换为单选按钮、复选框或文本输入框 —— 这取决与`input`元素的`type`属性。
40 |
41 | #### 非替换元素
42 |
43 | 大多数 HTML 元素是**非替换元素**。这意味着元素的内容会被用户代理（通常是浏览器）显示在一个由元素自己生成的“盒子”里。例如，`When handling plutonium, care must be taken to avoid 331 | the formation of a critical mass.
332 |With plutonium, the possibility of implosion is 333 | very real, and must be avoided at all costs. This can be accomplished 334 | by keeping the various masses separate.
335 | ~~~ 336 | 337 | 要把类选择器和一个元素联系起来，必须为`class`属性设置一个合适的值。在上面的代码中，一个值为`warning`的类被分配给两个元素：第一个段落和第二个段落里的`span`元素。 338 | 339 | 现在只需要一种方式把样式应用在这些元素上。在HTML文档中，可同`class`名称紧跟一个句点（.），并且可以与元素选择器一起使用： 340 | 341 | ~~~css 342 | .warning {font-weight: bold;} 343 | ~~~ 344 | 345 | 与前面所示的示例标记集合使用，这个简单规则的效果如图 1-6 所示。亦即，声明`font-weight: bold`会应用在每个（得益于隐含的通配选择器）`class`属性值为`warning`的元素上。 346 | 347 | _**通配选择器的符号是`*`，使用 ID、类、属性选择器、伪类选择器以及伪元素选择器等时，如果没有结合元素选择器，它们会隐式地包含通配选择器。**_ 348 | 349 |  350 | 351 | *图1-6：使用类选择器* 352 | 353 | 如你所见，类选择器直接通过元素`class`属性中的值来引用元素。引用始终以句点（.）开头，标记它是一个**类选择器**。句点把类选择器和与其组合在一起的其他部分区分开来（例如元素选择器）。假如当只有整个段落是警告时，才设置为粗体： 354 | 355 | ~~~css 356 | p.warning {font-weight: bold;} 357 | ~~~ 358 | 359 | 选择器现在只会匹配任何`class`属性值中包含单词`warning`的`p`元素，而其他类型的元素无论有没有设置`class`值都不会被选中。因为`span`元素不是段落，选择器不会匹配到它，因此它不会显示为粗体文字。 360 | 361 | 如果想为`span`元素分配不同的样式，可以使用选择符`span.warning`： 362 | 363 | ~~~css 364 | p.warning {font-weight: bold;} 365 | span.warning {font-style: italic;} 366 | ~~~ 367 | 368 | 这样，警告段落被设置为粗体，而警告`span`被设置为斜体。每个规则仅应用于特定的元素/类组合，而不会影响到其他元素。 369 | 370 | 另一种做法是使用一个一般的类选择器和一个特定元素的类选择器，来让样式更加有用，例如这样： 371 | 372 | ~~~css 373 | .warning {font-style: italic;} 374 | span.warning {font-weight: bold;} 375 | ~~~ 376 | 377 | 效果在图1-7中。 378 | 379 |  380 | 381 | *图1-7：使用一般和特定选择器联合样式* 382 | 383 | 这样设置，任何警告文字都被设置成斜体，但只有`class`属性值为`warning`的`span`元素中，文本既是粗体又是斜体。 384 | 385 | 请注意上例中的一般类选择器，它只包含一个类名和前面的句点，而没有任何元素名称，也没有通配选择器。如果你想选择具有某个类名的所有元素，省略通配选择器不会有任何影响。 386 | 387 | ### 多类 388 | 389 | 我们在前面看到了包含单个单词的`class`的属性值。在HTML中，使用空白分隔的单词列表可以作为单个`class`的值。例如，如果你想把某个特定元素标记为既是紧急的又是一个警告，可以这样写： 390 | 391 | ~~~html 392 |When handling plutonium, care must be taken to 393 | avoid the formation of a critical mass.
394 |With plutonium, the possibility of implosion is 395 | very real, and must be avoided at all costs. This can be accomplished 396 | by keeping the various masses separate.
397 | ~~~ 398 | 399 | （`class`值中）单词的顺序没有影响，写成`warning urgent`会产生完全相同的结果。 400 | 401 | 假如你想让所有`class`值为`warning`的元素加粗，把`class`值为`urgent`的设为斜体，而同时包含两个值的元素设置银色背景，写法是这样： 402 | 403 | ~~~css 404 | .warning {font-weight: bold;} 405 | .urgent {font-style: italic;} 406 | .warning.urgent {background: silver;} 407 | ~~~ 408 | 409 | 连接两个类选择器，可以选择那些只有同时具有两个类名的元素，无论类名的顺序如何。正如示例，HTML 代码中含有`class="urgent warning"`,但 CSS 选择器却写作`.warning.urgent`。这条规则依然可以把“When handling plutonium . . .”这段设置为银色背景，如图 1-8 所示，这是因为单词书写的顺序并不重要。（但这并不表示类名的顺序总是无关紧要的，我们将会在本书稍后涉及。） 410 | 411 |  412 | *图1-8：使用多类名选择元素* 413 | 414 | 如果多类选择器里面包含一个不存在于空格分隔列表的类名，匹配将会失败。例如这个规则： 415 | 416 | ~~~css 417 | p.warning.help {background: red;} 418 | ~~~ 419 | 420 | 你可能期望这个选择器会匹配所有`class`中含有单词`warning`或`help`的`p`元素，然而实际上它不会匹配`class`属性中只有`warning`和`urgent`的`p`元素。它会匹配这样的元素： 421 | 422 | ~~~html 423 |Help me!
424 | ~~~ 425 | 426 | ### ID选择器 427 | 428 | 从某些方面说，ID 选择器和类选择器类似，但它们有一些重要区别。首先，ID 选择器使用井号（`#`）开头，一条规则可能是这样的： 429 | 430 | ~~~css 431 | *#first-para {font-weight: bold;} 432 | ~~~ 433 | 434 | 这条规则为任意`id`属性值为`first-para`的元素设置文本粗体。 435 | 436 | 第二个区别是 ID 选择器（理所当然地）查找`id`属性而不是`class`属性的值。这是一个 ID 选择器生效的例子： 437 | 438 | ~~~css 439 | *#lead-para {font-weight: bold;} 440 | ~~~ 441 | 442 | ~~~html 443 |This paragraph will be boldfaced.
444 |This paragraph will NOT be bold.
445 | ~~~ 446 | 447 | 注意值`lead-para`可以关联给文档中的任意元素。在这个例子中，它只赋给了第一个段落，但是你可以同样赋给第二个、第三个段落。 448 | 449 | 和类选择器一样，ID 选择器中的通配选择符可以忽略。上例也可以写成这样： 450 | 451 | ~~~css 452 | #lead-para {font-weight: bold;} 453 | ~~~ 454 | 455 | 效果是一样的。 456 | 457 | 另一个与类选择器相似的地方是，ID 选择器也可以独立于元素类型。可能有些场景下你知道有一个确定 ID 值会出现在文档中，但不知道会出现在哪个元素上（如在前面的钚处理警告中），因此需要声明独立的ID选择器。例如，在任意给定的文档中，有一个元素的 ID 值是`mostImportant`，但不知道这个元素是一个段落、引用、列表还是段落头，只知道这个值会出现在每个文档中的某个随机的元素上，而且在每个文档中仅出现一次。在这种情况下，规则可以这样写： 458 | 459 | ~~~css 460 | #mostImportant {color: red; background: yellow;} 461 | ~~~ 462 | 463 | 这条规则会匹配下面的每一个元素（正如上面强调的，因为它们有相同的 ID 值，所以任意两个*不应该*同时出现在一个文档中）： 464 | 465 | ~~~html 466 |This is important!
467 | This is important! 468 |- This is important!
Don't look down.
489 | ~~~ 490 | 491 | 因为字母`i`的大小写不一致，选择器不会匹配元素。 492 | 493 | 从纯语法层次来说，点-类标记（例如：`.warning`）不能保证在 XML 文档中生效。在撰写本文时，点-类标记在 HTML、SVG和 MathML 中有效，它可能在未来被更多语言支持，但这要取决于语言本身的规范。哈希-ID 标记（例如：#lead）在所有强制属性唯一性的语言中都有效。唯一性可以强制使用名为`id`的属性，或者任何其他属性，只要在文档中属性内容被定义为唯一的即可。 494 | 495 | ## 属性选择器 496 | 497 | 当你使用类和 ID 选择器时，实际上是在选择属性的值。类选择器和 ID 选择器专用于 HTML、XHTML、SVG和 MathML 文档（到撰写本文时），但在其它的标记语言中，这两个选择器可能是不可用的（属性可能不存在）。因此，CSS2 引入了**属性选择器**，使用元素的任意属性和值来选择元素。属性选择器有四种基本类型：简单属性选择器、准确属性值选择器、部分匹配属性选择器和头值属性选择器。 498 | 499 | ### 简单属性选择器 500 | 501 | 如果想选择具有某个特定属性的元素，而无论属性的值是什么，可以使用**简单属性选择器**。例如，选择所有具备`class`属性的`h1`元素，然后将其文本设置为银色： 502 | 503 | ~~~css 504 | h1[class] {color: silver;} 505 | ~~~ 506 | 507 | 对如下代码： 508 | 509 | ~~~html 510 |Hello
511 |Serenity
512 |Fooling
513 | ~~~ 514 | 515 | 将得到如图1-9的结果： 516 | 517 |  518 | 519 | *图1-9：使用属性选择元素* 520 | 521 | 这种策略对 XML 文档非常有用，因为 XML 语言的元素经常含有表示特定意义的属性名。例如可以想象一种描述太阳系行星的 XML 语言（可以叫它 PlanetML）。如果想要选择所有包含`moons`属性的`pml-planet`元素，把文本设置成粗体，用来突出有月亮的行星，可以这样写： 522 | 523 | ~~~css 524 | pml-planet[moons] {font-weight: bold;} 525 | ~~~ 526 | 527 | 第二个和第三个元素将会被设置成粗体，第一个则不会： 528 | 529 | ~~~html 530 |561 | Standards Info
562 | dead.letter 563 | ~~~ 564 | 565 | ### 基于准确属性值选择 566 | 567 | 可以进一步缩小选择器范围选择那些某个属性为某个确定值的元素。例如，把指向服务器上某个特定文档的链接设置为粗体： 568 | 569 | ~~~css 570 | a[href="http://www.css-discuss.org/about.html"] {font-weight: bold;} 571 | ~~~ 572 | 573 | 所有`href`属性值**准确地**是`http://www.css-discuss.org/about.html`的`a`元素会被设置为粗体。任何修改，即使去掉了`www.`，也会造成无法匹配。 574 | 575 | 任何属性和值的联合都可以定义在任何元素上，然而，如果这个联合没有（准确地）出现在文档中，选择器不会匹配任何东西。XML 语言再次得益于这种方式来设置属性。回到 PlantML 的例子，如果想选择那些`moons`属性值为`1`的`planet`元素： 576 | 577 | ~~~css 578 | planet[moons="1"] {font-weight: bold;} 579 | ~~~ 580 | 581 | 第二个元素的文本将会被设置为粗体，第一个和第三个不会： 582 | 583 | ~~~html 584 |
599 | Standards Info
601 | dead.link 602 | ~~~ 603 | 604 | 结果如图 1-10。 605 | 606 |  607 | 608 | *图1-10：使用属性和值选择元素* 609 | 610 | 这种方式需要属性值的**精确**匹配。属性值为多个空白分隔的值列表时，匹配可能会因多个值的顺序不同而产生问题（如 HTML 的属性 `class`）。例如下面的代码片段： 611 | 612 | ~~~html 613 |
When handling plutonium, care must be taken to 626 | avoid the formation of a critical mass.
627 | ~~~ 628 | 629 | 要基于准确属性值选择元素，应该这样： 630 | 631 | ~~~css 632 | p[class="urgent warning"] {font-weight: bold;} 633 | ~~~ 634 | 635 | 我们将在下节看到，这和之前介绍的点-类选择是**不**等同的。这条规则将会选择`class`属性值**精确**地是`urgent warning`的所有`p`元素，单词以相同的顺序，并且中间以单个空格隔开。它实际上是一个精确字符串匹配。 636 | 637 | 同样地，ID 选择器和使用`id`属性的属性选择器也不是恰好相同的。换句话说，在`h1#page-title`和`h1[id="page-title"]`之间，存在着细微但很重要的区别。这种区别将在章节“特度”解释。 638 | 639 | ### 基于部分属性值选择 640 | 641 | 你可能想基于属性值的一部分而不是整个值来选择元素，这种情况下 CSS 提供了一些选择，匹配属性值中的子串。它们总结在表格 1-1 中。 642 | 643 | *表格1-1：子串匹配属性选择器* 644 | 645 | |类型|描述| 646 | |:----|:-----| 647 | |`[foo~="bar"]`|选择所有带有`foo`属性、且`foo`属性被空白分隔的单词列表中含有单词`bar`的元素。| 648 | |`[foo*="bar"]`|选择所有带有`foo`属性、且`foo`属性值中含有子串`bar`的元素。| 649 | |`[foo^="bar"]`|选择所有带有`foo`属性、且`foo`属性值以`bar`开头的元素。| 650 | |`[foo$="bar"]`|选择所有带有`foo`属性、且`foo`属性值以`bar`结束的元素。| 651 | |`[foo|="bar"]`|选择所有带有`foo`属性、且`foo`属性值以`bar`开头后接一个短线（`U+002D`）或者属性值是`bar`的元素。| 652 | 653 | ### 特定的属性选择器 654 | 655 | 基于部分属性值的选择器中的最后一个，展示它的用法比描述它更简单。看下面的规则： 656 | 657 | ~~~css 658 | *[lang|="en"] {color: white;} 659 | ~~~ 660 | 661 | 这条规则会选择任何`lang`属性等于`en`或者以`en-`开头的元素。因此，下面的示例中前三个标签会被选中，而后两个则不会： 662 | 663 | ~~~html 664 |Hello!
665 |Greetings!
666 |G'day!
667 | Bonjour!
668 |Jrooana!
669 | ~~~ 670 | 671 | 一般来说，`[att|="val"]`的格式可以用于任何属性和属性值。如果HTML文档中有一系列图片，文件名都像**“figure-1.gif”**和**“figure-3.jpg”**这样，可以使用这样的选择器匹配所有这样的图片： 672 | 673 | ~~~css 674 | img[src|="figure"] {border: 1px solid gray;} 675 | ~~~ 676 | 677 | 如果你正在创建一个 CSS 框架或模式库，不必创建许多繁琐的类：`"btn btn-small btn-arrow btn-active"`，你可以声明`"btn-small-arrow-active"`，然后这样匹配元素的类： 678 | 679 | ~~~css 680 | *[class|="btn"] { border-radius: 5px;} 681 | ~~~ 682 | 683 | ~~~html 684 | 685 | ~~~ 686 | 687 | 这个属性选择器最常用的场景是用来匹配语言值，我们将在"`:lang`伪类"章节看到。 688 | 689 | #### 匹配空白分隔的列表中的一个单词 690 | 691 | 任何使用空白分隔单词列表的属性，都可以基于这些单词中的任意一个选择元素。HTML 中最经典的例子是`class`属性，该属性可以使用一或多个单词作为值。看这个常用例子： 692 | 693 | ~~~html 694 |When handling plutonium, care must be taken to 695 | avoid the formation of a critical mass.
696 | ~~~ 697 | 698 | 如果要选择`class`属性中包含单词`warning`的元素，可以使用这样的属性选择器： 699 | 700 | ~~~css 701 | p[class~="warning"] {font-weight: bold;} 702 | ~~~ 703 | 704 | 注意选择器中的波浪线（~），这是基于属性值中分离单词进行选择的关键字。如果忽略了波浪线，选择器就变成了前面讨论过的精确值匹配的属性选择器。 705 | 706 | 这个选择器跟“决定使用Class还是ID”中的点-类选择器是等同的。也就是说，用于 HTML 文档时，`p.warning`和`p[class~="warning"]`是相等同的。这是前面提到过的“PlanetML”标记例子的一个 HTML 版本： 707 | 708 | ~~~html 709 | 710 | 711 | Earth 712 | ~~~ 713 | 714 | 要把所有`class`属性值中包含单词`barren`的元素设置为斜体： 715 | 716 | ~~~css 717 | span[class~="barren"] {font-style: italic;} 718 | ~~~ 719 | 720 | 这个选择器将会匹配例子中的前两个元素并把它们设置为斜体。这和使用`span.barren {font-style: italic;}`是一样的效果。 721 | 722 |  723 | 724 | *图1-11：使用部分属性值选择元素* 725 | 726 | 既然效果相同，为什么还要在HTML中使用波浪线-等号属性选择器呢？因为它可被用于任何属性，而不仅仅是`class`。例如：一个文档中包含许多图片，其中一部分是图表，你可以使用匹配部分属性值的选择器选择`title`属性的文字，来选中那些是图表的图片： 727 | 728 | ~~~css 729 | img[title~="Figure"] {border: 1px solid gray;} 730 | ~~~ 731 | 732 | 这条规则会选择所有`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”的图片，都不会被匹配。 733 | 734 | #### 匹配属性值中的子串 735 | 736 | 有时需要匹配属性值的一部分，但并不是空格分隔的单词。这种情况下，可以使用`[att*="val"]`的形式匹配属性值中的任何位置。例如：下面的CSS匹配任何`class`属性值中包含子串`cloud`的`span`元素，所以两个“cloudy”的行星都会被匹配，如图1-12。 737 | 738 | ~~~css 739 | span[class*="cloud"] {font-style: italic;} 740 | ~~~ 741 | 742 | ~~~html 743 | 744 | 745 | Earth 746 | ~~~ 747 | 748 |  749 | 750 | *图1-12：基于属性值内子串选择元素* 751 | 752 | 这种用法有许多有用的场景，例如为所有到O'Reilly Media网页的链接添加特殊样式。避免给它们设置类名并基于类添加样式，可以简单地使用下面的规则： 753 | 754 | ~~~css 755 | a[href*="oreilly.com"] {font-weight: bold;} 756 | ~~~ 757 | 758 | 选择不限于使用`class`和`href`属性，任何属性都可以。`title`、`alt`、`src`、`id`……可以基于任何属性值的子串添加样式。下面的规则选择所有源文件 URL 中包含字符串“space”的图片： 759 | 760 | ~~~css 761 | img[src*="space"] {border: 5px solid red;} 762 | ~~~ 763 | 764 | 类似地，下面的规则关注有标题的`input`元素，标题中包含子串`format`： 765 | 766 | ~~~css 767 | input[title*="format"] {background-color: #dedede;} 768 | ~~~ 769 | 770 | ~~~html 771 | 774 | ~~~ 775 | 776 | 属性子串匹配选择器常用来匹配模式库中的类名。在前面的例子中，我们可以匹配以`btn`开始后跟一个短线，并且包含前面有短线的子串`arrow`的类名： 777 | 778 | ~~~css 779 | *[class|="btn"][class*="-arrow"]:after { content: "▼";} 780 | ~~~ 781 | 782 | ~~~html 783 | 784 | ~~~ 785 | 786 | 这种匹配方式是精确匹配——如果选择器中包含空白，属性值中必须包含空白才能匹配。只有当依赖的文档语言要求区分大小写时，属性名和值才必须区分大小写。类名、标题和 ID 值都是大小写敏感的，但 HTML 的属性关键字值，比如`input`元素的类型，不区分大小写： 787 | 788 | ~~~css 789 | input[type="CHeckBoX"] {margin-right: 10px;} 790 | ~~~ 791 | 792 | ~~~html 793 | 794 | ~~~ 795 | 796 | #### 匹配属性值开头的子串 797 | 798 | 当需要基于属性值开头的子串选择元素时，可以使用属性选择器模式`[attr^="val"]`。这个匹配模式在给不同类别的链接设置样式时特别有用，如图 1-13 所示： 799 | 800 | ~~~css 801 | a[href^="https:"] {font-weight: bold;} 802 | a[href^="mailto:"] {font-style: italic;} 803 | ~~~ 804 | 805 |  806 | 807 | *图1-13：基于属性开头的子串选择元素* 808 | 809 | 另一个使用场景是为文档中所有内容是说明的图片添加样式——假定所有的说明图的`alt`属性的文字都以“Figure 5”这样的模式开头——则可以使用这种方式选择这些图片： 810 | 811 | ~~~css 812 | img[alt^="Figure"] {border: 2px solid gray; display: block; margin: 2em auto;} 813 | ~~~ 814 | 815 | 潜藏的问题是，**任何**`alt`属性值以“Figure”开头的`img`标签都会被选择，而无论它是不是一个说明图。显然，是否产生这个问题是由文档决定的（而不是选择器）。 816 | 817 | 另一个使用场景是选择所有周一的日程。这种场景中，我们约定所有的事件都有个`title`属性，它以这样的日期格式`Monday,March 5th,2012`开头。选择它们只需要简单地使用`[title^="Monday"]`。 818 | 819 | #### 匹配属性值结尾的字串 820 | 821 | 与开头子串匹配相对应的是结尾子串匹配，使用选择器模式`[att$="val"]`。最常见的使用场景是基于链接的资源类型添加样式，例如图1-14所示，为指向 PDF 文档的链接添加特定样式。 822 | 823 | ~~~css 824 | a[href$=".pdf"] {font-weight: bold;} 825 | ~~~ 826 | 827 |  828 | 829 | *图1-14：基于属性结尾的子串选择元素* 830 | 831 | 类似地，可以（无论因何）基于格式选择图片： 832 | 833 | ~~~css 834 | img[src$=".gif"] {...} 835 | img[src$=".jpg"] {...} 836 | img[src$=".png"] {...} 837 | ~~~ 838 | 839 | 上一节中日程的例子，可以基于给定的年份选择所有事件，使用一个类似这样的选择器`[title$="2015"]`（`title`属性以年份结尾）。 840 | 841 | _**你可能注意到了，属性选择器中的所有属性值都用了引号包围。当属性值包含任何特殊字符、以短线或数字开头、或其他非法标识符时，需要使用引号把它标记成字符串。为了安全，建议在任何情况下都为属性选择器中的属性值添加引号，尽管只有非法标识符导致它需要被标记成字符串的时候引号才是必需的。**_ 842 | 843 | ### 忽略大小写标识符 844 | 845 | CSS Selectors level 4 为属性选择器引入了忽略大小写选项。在中括号关闭之前使用`i`允许选择器匹配属性值的时候忽略大小写，无视文档语言的规则。 846 | 847 | 例如，你想选择所有指向 PDF 文档的链接，但并不确定它们以`.pdf`、`.PDF`还是`.Pdf`结束，可以这样： 848 | 849 | ~~~css 850 | a[href$='.PDF' i] 851 | ~~~ 852 | 853 | 添加一个小小的`i`表示选择器匹配任何`href`属性以`.pdf`结束的`a`元素，无论其中是否包含大写的`P`、`D`或`F`。 854 | 855 | 忽略大小写选项适用于前面涉及的所有属性选择器，但要注意它只用于属性选择器的**值**，而不能用于属性名本身。因此，在大小写敏感的语言中，`planet[type*="rock" i]`可以匹配下面所有的元素： 856 | 857 | ~~~html 858 |Meerkat Central
888 |889 | Welcome to Meerkat Central, the best meerkat web site on the entire Internet! 890 |
891 |-
892 |
- We offer:
893 |
-
894 |
- Detailed information on how to adopt a meerkat 895 |
- Tips for living with a meerkat 896 |
- Fun things to do with a meerkat, including:
897 |
-
898 |
- Playing fetch 899 |
- Digging for food 900 |
- Hide and seek 901 |
903 |
905 | - ...and so much more! 906 |
Questions? Contact us!
908 | 909 | 910 | ~~~ 911 | 912 | CSS 的能力很大程度基于于元素的**父-子关系**。HTML 文档（事实上绝大部分结构化文档）基于元素层级结构，构成文档的“树状”视图（见图1-15）。在这种层级结构中，每个元素都处在整个文档结构中的某个适当位置上，每个元素都是其他元素的**父**或者**子**，常常既是父又是子。 913 | 914 |  915 | 916 | *图1-15：文档树结构* 917 | 918 | 在文档层级结构中，如果一个元素在另一个元素的紧邻的上方，就被称作那个元素的父元素。例如，在图1-15中，第一个`p`元素是`em`和`strong`元素的父元素，同时`strong`是一个锚点（`a`）元素的父元素，这个`a`元素又是另一个`em`元素的父元素。反过来，如果在文档层级中，一个元素在另一个元素的紧邻的下方，就被称作那个元素的子元素。因此，图1-15中的锚点元素是`strong`元素的子元素，`strong`元素又是`p`元素的子元素，等等。 919 | 920 | “父”和“子”是**祖先**和**后代**的特例。它们的区别是：在树状视图中，如果一个元素在另一个元素上面一级，那么它们是父-子关系。如果一个元素到另一个元素的路径有两级或者更多，那么它们是祖先-后代关系，但不是父-子关系。（当然，子也是后代，同时父也是祖先。）在图 1-15 中，第一个`ul`元素是两个`li`元素的父元素，同时也是它的`li`元素所有后代元素的祖先元素，直到嵌套路径最深的`li`元素。 921 | 922 | 同时，在图1-15中，存在一个锚点元素既是`strong`元素的子元素，又是`p`、`body`和`html`元素的后代元素。`body`元素是浏览器默认显示的所有元素的祖先元素，`html`是整个文档中所有其他元素的祖先元素。因此在 HTML 或 XHTML 文档中，`html`元素也被叫做**根元素**。 923 | 924 | ### 后代选择器 925 | 926 | 理解文档模型的第一个用处是可以定义**后代选择器**（也叫做**上下文选择器**）。定义后代选择器可以创建只作用于特定结构的规则。例如，如果想要只为那些是`h1`元素的后代的`em`元素设置样式。你可以为`h1`中的`em`元素添加一个`class`属性，但这样做会跟使用`font`标签一样耗费时间。很明显，声明一个只匹配`h1`元素中的`em`元素的规则更加方便。 927 | 928 | 实现这个规则，可以这样写： 929 | 930 | ~~~css 931 | h1 em {color: gray;} 932 | ~~~ 933 | 934 | 这条规则会把所有是`h1`元素后代的`em`元素中的文本设置为灰色。其他的`em`文本，例如在段落（`p`）或引用（`blackquote`）中的`em`元素，不会被这条规则选择。见图1-16。 935 | 936 |  937 | 938 | *图1-16：基于上下文选择元素* 939 | 940 | 在后代选择器中，选择器由两个或更多空白分隔的选择器组成。选择器之间的空格是一个**组合器**的例子。每个空格组合器都可以被译作“在……中”、“是……的一部分”或“是……的后代”，前提是选择器从右向左读。因此，`h1 em`可以被译作“把样式作用于任何`em`元素，如果它是`h1`元素的后代”。（如果选择器从左向右读，则是：“选择任何`h1`，如果它包含一个`em`元素，规则将会作用于它包含的`em`”）。 941 | 942 | 可以使用不止两个选择器，例如： 943 | 944 | ~~~css 945 | ul ol ul em {color: gray;} 946 | ~~~ 947 | 948 | 在这种情况下，任何`em`文本，如果这个`em`在一个`ul`中，同时`ul`在一个`ol`中，而`ol`又在另一个`ul`中，这个`em`会被设置为灰色,如1-17所示。这是一条非常具体的选择规则。 949 | 950 |  951 | 952 | *图1-17：一个非常具体的后代选择器* 953 | 954 | 后代选择器非常有用，它使得 HTML 中（至少是不使用怪异的`font`标签时）办不到的事情变成可能。一个常见的场景是：如果文档中有一个侧边栏和一个主区域，侧边栏的背景是蓝色，而主区域的背景是白色，它们都包含链接。不能把链接设置为蓝色，因为如果这样的话，侧边栏中的链接就看不到了。 955 | 956 | 解决方法是：后代选择器。在这种情况下，给包含侧边栏的元素（一般是一个`div`）添加一个`class`值`sidebar`，把主区域的`class`命名为`main`，然后使用如下样式： 957 | 958 | ~~~css 959 | .sidebar {background: blue;} 960 | .main {background: white;} 961 | .sidebar a:link {color: white;} 962 | .main a:link {color: blue;} 963 | ~~~ 964 | 965 | 图1-18显示了样式的结果。 966 | 967 |  968 | 969 | *图1-18：使用后代选择器为同一类型的元素添加不同的样式* 970 | 971 | _**`:link`选择那些尚未被访问过的资源链接，我们将在“超链接伪类”中详细讨论。**_ 972 | 973 | 另一个例子是：如果要把所有在`blockquote`和`p`中的`b`元素文本设置为灰色： 974 | 975 | ~~~css 976 | blockquote b, p b {color: gray;} 977 | ~~~ 978 | 979 | 这条样式的结果是在段落或引用段落中的`b`元素中的文本显示为灰色。 980 | 981 | 后代选择器的一个容易被忽略的地方是，元素和后代元素之间可以间隔无限代其他元素。例如，如果使用规则`ul em`，将会选择`ul`元素后代中的任何`em`元素，无论`em`元素嵌套多么深。因此，对下面的代码，`ul em`会匹配到其中的`em`元素。 982 | 983 | ~~~html 984 |-
985 |
- List item 1
986 |
-
987 |
- List item 1-1 988 |
- List item 1-2 989 |
- List item 1-3
990 |
-
991 |
- List item 1-3-1 992 |
- List item 1-3-2 993 |
- List item 1-3-3 994 |
996 | - List item 1-4 997 |
999 |
1011 |
1015 | ~~~
1016 |
1017 | 第一条规则表示“任何`class`中不包含单词`help`的`div`元素中的`span`元素被设置为灰色”，第二条规则表示“任何`class`中包含单词`help`的`div`元素中的`span`元素被设置为红色”。对示例中的HTML代码来说，两条规则都会被作用于`span`元素。
1018 |
1019 | 因为两条规则有相同的权重，且“红色”规则被写在后面，`span`会被设置为红色。虽然`div class="aside"`比`div class="help"`相比，与`span`元素更“紧密”，但实际上这种紧密程度与规则的选择毫不相关。亦即：后代选择器没有紧密程度的概念。两条规则都匹配了元素，只有一种颜色可以生效，根据CSS的工作方式，红色“胜利”了。（下一章讨论）
1020 |
1021 | ### 选择子元素
1022 |
1023 | 有时，我们并不想选择全部的后代元素，而是把选择范围控制在元素的子级，例如选择一个是`h1`元素的子元素（而不是任意后代元素）的`strong`元素，这种情况下，可以使用子元素组合器，它是一个大于号（`>`）:
1024 |
1025 | ~~~css
1026 | h1 > strong {color: red;}
1027 | ~~~
1028 |
1029 | 这条规则将会把下面的第一个`h1`元素中的`strong`元素设置为红色，第二个`h1`元素中的`strong`元素则不会被设置为红色。
1030 |
1031 | ~~~html
1032 |
1012 | This text contains a span element within.
1013 |
1014 | This is very important.
1033 |This is really very important.
1034 | ~~~ 1035 | 1036 | 从右往左读，选择器`h1 > strong`可以译作“选择任何`strong`元素，如果它是一个`h1`元素的子元素”。子元素组合器两边可以添加空格, 你可以根据自己的爱好添加或省略空格，`h1 > strong`、`h1> strong`和`h1>strong`是完全等价的。 1037 | 1038 | 观察文档的树状结构视图，子元素选择器把匹配限制在直接连接的元素上。图1-19显示了部分文档树。 1039 | 1040 |  1041 | 1042 | *图1-19：一个文档树片段* 1043 | 1044 | 在这文档树片段中，可以很清楚的观察到父-子关系。例如，`a`元素是`strong`元素的父元素，同时是`p`元素的子元素。在这个片段中，可以使用`p > a`和`a > strong`选择元素，但无法使用`p > strong`选择元素，因为`strong`是`p`的后代元素但不是子元素。 1045 | 1046 | 在同一个选择器中可以结合使用后代选择器和子元素原则器。`table.summary td > p`选择是`td`元素子元素的`p`元素，同时这个`td`元素需要是一个`class`属性值包含`summary`的`table`元素的后代元素。 1047 | 1048 | ### 选择相邻兄弟元素 1049 | 1050 | 假如想要为一个紧跟着标题的段落设置样式，或者给一个紧跟着段落的列表添加一个边距，可以使用**相邻兄弟组合器**来选择在同一个父级元素下紧跟着另一个元素的元素，组合器使用加号（`+`）。就像子级选择器一样，这个符号也可以在两边添加或省略空格。 1051 | 1052 | 移除一个紧跟`h1`元素的段落的上边距： 1053 | 1054 | ~~~css 1055 | h1 + p {margin-top: 0;} 1056 | ~~~ 1057 | 1058 | 选择器读作：“选择任何紧跟在`h1`元素后面的`p`元素”。 1059 | 1060 | 看图1-20的文档树片段，更清晰地观察这个选择器是如何生效的： 1061 | 1062 |  1063 | 1064 | *图1-20：一个文档树片段* 1065 | 1066 | 在这个片段中有两个列表都是`div`元素的后代，一个是有序列表，另一个是无序列表，每个都包含三个列表项。两个列表互为相邻兄弟，每个列表中的列表项也互为相邻兄弟，但第一个列表中的项与第二个列表中的列**不是**相邻兄弟，因为它们没有共同的父元素。（它们最多是表兄弟元素，但CSS没有表兄弟元素选择器。） 1067 | 1068 | 选择后面的两个相邻兄弟只需要一个组合器符号，如果写作`li + li {font-weight: bold;}`,只有每个列表中的第二项和第三项会被设置为粗体，样式不会对第一项生效。见图1-21. 1069 | 1070 |  1071 | 1072 | *图1-21：选择相邻兄弟元素* 1073 | 1074 | CSS的正确性依赖于两个元素的“代码顺序“。在上面的例子中，一个`ol`元素后面紧跟着一个`ul`元素，因此可以使用`ol + ul`选择第二个（`ul`）元素，但不能选择第一个（`ol`）元素。如果想使`ul + ol`匹配，需要一个`ol`元素紧跟在一个`ul`元素后面。 1075 | 1076 | 需要记住，两个元素之间的文本内容**不会**影响相邻元素组合器。下面的代码片段，树视图与图1-19是一样的： 1077 | 1078 | ~~~html 1079 |
1080 |
1092 | ~~~
1093 |
1094 | 尽管两个列表之间有文本内容，选择器`ol + ul`依然会匹配第二个列表。因为文本并不包含一个兄弟元素，而是属于父元素`div`的一部分。如果把文本内容用一个段落元素（`p`）包起来，`ol + ul`匹配第二个列表的行为将会被终止。要匹配第二个列表，需要用`ol + p + ul`这样的选择器。
1095 |
1096 | 相邻兄弟组合器可以与其他组合器连接使用，例如：
1097 |
1098 | ~~~css
1099 | html > body table + ul{margin-top: 1.5em;}
1100 | ~~~
1101 |
1102 | 这个选择器是指：“选择任何紧跟`table`元素的兄弟`ul`元素，同时这个`table`元素是一个`body`元素的后代，而`body`元素是一个`html`的子元素。”
1103 |
1104 | 和所有组合器一样，相邻兄弟选择器可以用于很复杂的选择器中，如`div#content h1 + div ol`。这个选择器是：“选择任何是`div`元素后代的`ol`元素，同时这个`div`元素是一个`h1`元素的紧邻兄弟元素，而这个`h1`元素是一个`id`属性值为`content`的`div`元素的子元素。”
1105 |
1106 | ### 选择跟随兄弟元素
1107 |
1108 | Selectors Level 3 引入了一个新的兄弟组合器叫做**一般兄弟选择器**。这个组合器允许选择同一个父元素下，跟随（不一定是紧跟随）在某个元素后面的所有元素，使用波浪线符号（`~`）。
1109 |
1110 | 如下例，为同一个父元素下跟随在一个`h2`元素后面的任何`ol`元素设置斜体，可以写作`h2 ~ ol {font-style: italic;}`。两个`ol`元素不必都是紧邻兄弟，尽管是紧邻兄弟的话也会被这条规则匹配。效果见图1-22.
1111 |
1112 | ~~~html
1113 | -
1081 |
- List item 1 1082 |
- List item 1 1083 |
- List item 1 1084 |
-
1087 |
- A list item 1088 |
- Another list item 1089 |
- Yet another list item 1090 |
1114 |
1128 | ~~~
1129 |
1130 | 
1131 |
1132 | *图1-22：选择跟随兄弟元素*
1133 |
1134 | 如图所示，两个有序列表都是斜体，因为两个`ol`元素都在`h2`元素后面，且它们（三个）共有一个父元素（`div`）。
1135 |
1136 | ## 伪类选择器
1137 |
1138 | **伪类选择器**非常有趣，它们是一些根据元素状态变化而产生作用的幽灵类。伪类选择器可以根据某些确定元素的状态、文档中的标记模式甚至文档本身的状态选择元素并添加样式。
1139 |
1140 | “幽灵类”的说法可能看起来有点怪，但这个词非常贴切地体现了伪类的工作方式。例如，假如你想要把一个数据表格每隔一行设置为高亮，你可以每隔一行在行元素上加一个`class="even"`，然后写一段CSS把`class`值有`even`的行设置为高亮。但是你也可以使用伪类选择器更简便地实现相同的效果，后面会很快看到它的用法。
1141 |
1142 | ### 组合伪类
1143 |
1144 | 在开始之前，先提一下“链式”。CSS允许（链式）组合伪类选择器，例如，当鼠标停留在（`hover`）一个未访问过的链接（``）上时，将其设置为红色，当鼠标停留在已经访问过的链接上时,将其设置为栗色：
1145 |
1146 | ~~~css
1147 | a:link:hover {color: red;}
1148 | a:visited:hover {color: maroon;}
1149 | ~~~
1150 |
1151 | （伪类的）顺序无关紧要，`a:hover:link`和`a:link:hover`的效果是一样的。同样的，可以为特定语言的不同状态的链接设置不同的样式，例如德语：
1152 |
1153 | ~~~css
1154 | a:link:hover:lang(de) {color: gray;}
1155 | a:visited:hover:lang(de) {color: silver;}
1156 | ~~~
1157 |
1158 | 注意不要组合互斥的伪类，例如，一个链接不可能既是访问过的又是没访问过的，所以`a:link:visited`没有任何意义，它并不会匹配任何东西。
1159 |
1160 | ### 结构性伪类
1161 |
1162 | 大部分伪类都是结构性的，既它们是与文档的标记结构相关的。大部分伪类由标签内的结构决定，例如某个伪类选择器选择（某个文档片段中的）第三个段落（`p`）。其他一些选择器允许你处理特定类型的元素。所有的伪类都以一个冒号（`:`）开头，没有例外，而且它们可以出现在选择器的任何位置。
1163 |
1164 | 在开始之前，关于伪类有一点需要明确：伪类永远只指向他们关联的元素，而不是其他元素。这点似乎非常明显而没有必要特意强调，之所以要明确它，是因为在实际使用中，有一些结构型伪类常常被错误地当成后代元素的描述符。
1165 |
1166 | 为了进一步说明这点，我想分享一则我个人的轶事。2003年，我的大女儿，也是我的第一个孩子，出生了。我在网上公布了这个消息（就像你们会做的一样^_^）。许多人回复我表示祝贺，并讲了一些 CSS 的小幽默，许多人用了选择器`#ericmeyer:first-child.`。问题是这个选择器选择的是我，而且只有当我是我父母的第一个孩子的时候才会选择我（巧了，我还真是）。如果要选择我的第一个孩子，选择器应该是`#ericmeyer > :first-child`。
1167 |
1168 | 这种混淆是可以理解的，这就是为何我会在这里提到它，后面的章节我们会经常想起它。只要记住，伪类的作用是给它们绑定的元素添加一些“影子类”，就不容易犯（前面的）错误了。
1169 |
1170 | #### 选择根元素
1171 |
1172 | 这是结构简单性的精髓：伪类选择器`:root`选择文档的根元素。在 HTML 中，根元素**永远是**`html`元素。在为 XML 语言添加样式时，这个选择器会非常有用，因为在不同的语言中根元素可能不同。例如，在 RSS 2.0 中，根元素是`rss`。即使在一种语言（甚至是一个文档）里，也可能会使用不止一个根元素。
1173 |
1174 | 图 1-23 展示了一个给 HTML 中的根元素添加样式的例子：
1175 |
1176 | ~~~css
1177 | :root {border: 10px dotted gray;}
1178 | body {border: 10px solid black;}
1179 | ~~~
1180 |
1181 | 
1182 |
1183 | *图1-23：设置根元素样式*
1184 |
1185 | 当然，在HTML文档中，可以直接选择`html`元素，不需要使用`:root`伪类。这两个选择器在特度方面有差异，我们将在第 3 章讨论。
1186 |
1187 | #### 选择空元素
1188 |
1189 | 使用伪类`:empty`，可以选择任何没有子节点的元素——没有任何类型的子元素：**包含**文本节点，包括文字和空白。这有助于筛除 CMS 生成的没有填进任何实际内容的元素。因此，`p:empty {display: none;} `将会让所有空的段落不再显示。
1190 |
1191 | 注意，一个元素如果要被`:empty`匹配，它必须（从解析的角度看）是真正空的——没有空白、可见内容，或后代元素。在下面的元素中，只有第一个和最后一个会被`p:empty`匹配。
1192 |
1193 | ~~~html
1194 |
1195 | Subheadings
1115 |It is the case that not every heading can be a main heading. Some headings must be subheadings. Examples include:
1116 |-
1117 |
- Headings that are less important 1118 |
- Headings that are subsidiary to more important headlines 1119 |
- Headings that like to be dominated 1120 |
Let's restate that for the record:
1122 |-
1123 |
- Headings that are less important 1124 |
- Headings that are subsidiary to more important headlines 1125 |
- Headings that like to be dominated 1126 |
1196 |
1197 |
1198 | 1199 | ~~~ 1200 | 1201 | 第二个和第三个段落不会匹配`:empty`，因为它们不是空的：它们各自包含一个空格和一个换行符，都会被当做文本节点，因此不是空状态。最后一个段落能够匹配，因为注释既不会被当成内容，也不会被当成空白。但是如果在注释的任何一侧添加一个空格或者换行，`p:empty`将不再匹配它。 1202 | 1203 | 你可能会试着为所有空元素设置样式，像这样：`*:empty {display: none;}`，但是这里有个潜在的陷阱：`:empty`会匹配 HTML 的空元素，如`img`和`input`，甚至会匹配`textarea`，除非你为`textarea`元素插入了一些默认文本。因此，从匹配元素的角度来说，`img`和`img:empty`是一样的（它们在特度上有区别，我们将在下一章讨论）。 1204 | 1205 | ~~~html 1206 |
1207 | 1208 | 1209 | 1210 | ~~~ 1211 | 1212 | _**到 2017 年底，`:empty`是唯一一个在匹配元素的时候考虑文本节点的 CSS 选择器。所有 Selectors Level 3 的其他选择器都只考虑元素节点，而完全忽略文本节点——例如，前面讨论过的兄弟组合器**_ 1213 | 1214 | #### 选择唯一子元素 1215 | 1216 | 如果你想过选择所有被链接元素包含的图片，`:only-child`伪类正是为你准备的。它会选择那些是其他元素的唯一子元素的元素。如果你想为所有是其他元素唯一子元素的图片添加边框，可以这样写： 1217 | 1218 | ~~~css 1219 | img:only-child {border: 1px solid black;} 1220 | ~~~ 1221 | 1222 | 这个选择器会匹配所有符合标准的图片，因此，如果有一个段落元素（`p`）包含一个图片并且没有其他子元素，这个图片也会被匹配，而会忽略图片周围的文本。如果你想要选择那些在链接中的的唯一子元素的图片，可以这样设置选择器（效果见图 1-24）： 1223 | 1224 | ~~~css 1225 | a[href] img:only-child {border: 2px solid black;} 1226 | ~~~ 1227 | 1228 | ~~~html 1229 |
1230 | The W3C
1231 | The W3C
1232 | ~~~
1233 |
1234 | 
1235 |
1236 | *图片1-24：选择是链接中的唯一子元素的图片*
1237 |
1238 | 关于`:only-child`需要记住两个地方。第一个是**永远**用伪类选择你想要的唯一的子元素上，而不是它的父元素上，就像前面解释过的一样。这就引入了第二个要记住的地方：当在一个后代选择器中使用`:only-child`时，你并没有严格限定一个父-子关系。
1239 |
1240 | 回到链接-图片的例子，`a[href] img:only-child`匹配的是这样的元素：它们是其它元素的唯一子元素，同时是一个`a`元素的后代元素，而不一定是`a`元素的子元素。匹配的图片元素必须是它直接父元素的唯一子元素，而且是一个`a`元素的后代，它的直接父元素自身可以是一个`a`元素的后代。因此下面的三个图片都会被匹配，如图1-25。
1241 |
1242 | ~~~css
1243 | a[href] img:only-child {border: 5px solid black;}
1244 | ~~~
1245 |
1246 | ~~~html
1247 |
1248 |
1249 | A link to the web site
1250 | ~~~
1251 |
1252 | 
1253 |
1254 | *图片1-25：选择是链接中的唯一子元素的图片*
1255 |
1256 | 在每种情况下，图片都是它的父元素的唯一子元素，同时是一个`a`元素的后代元素，因此三个图片都会被规则匹配。如果要严格选择那些是一个`a`元素唯一子元素的图片，你只需要简单地添加子元素组合器`a[href] > img:only-child`。这样修改之后，上例中只有第一个图片才会被匹配。
1257 |
1258 | 完美！但是如果在链接元素中存在其他类型的元素的情况下，想选择链接元素中的唯一图片，应该怎么做呢？例如：
1259 |
1260 | ~~~html
1261 | •
1262 | ~~~
1263 |
1264 | 在这种情况下，`a`元素有两个子元素：一个`b`和一个`img`。这个图片不再是它父元素（链接）的唯一子元素，不再会被`:only-child`匹配。但是，它**可以**被`:only-of-type`匹配，如图1-26.
1265 |
1266 | ~~~css
1267 | a[href] img:only-of-type {border: 5px solid black;}
1268 | ~~~
1269 |
1270 | ~~~html
1271 | •
1272 | •
1273 | ~~~
1274 |
1275 | 
1276 |
1277 | *图片1-26：选择兄弟元素中的唯一图片*
1278 |
1279 | 区别在于：`:only-of-type`会匹配那些在所有兄弟元素中是唯一一个此类型的元素（既所有兄弟元素中没有与其类型相同的元素）；而`only-child`会匹配那些根本没有兄弟元素的元素。
1280 |
1281 | 选择段落中的图片，而不用担心段落中链接或其他行内元素的存在：
1282 |
1283 | ~~~css
1284 | p > img:only-of-type {float: right; margin: 20px;}
1285 | ~~~
1286 |
1287 | 因为在段落的子元素中没有多个图片，因此唯一的图片将会浮动显示。同样可以使用伪类为文档章节中的唯一的`h2`元素添加额外样式：
1288 |
1289 | ~~~css
1290 | section > h2 {margin: 1em 0 0.33em; font-size: 180%; border-bottom: 1px solid gray;}
1291 | section > h2:only-of-type {font-size: 240%;}
1292 | ~~~
1293 |
1294 | 使用这些规则，任何`section`里面的唯一的`h2`元素将会比通常显示得大一些。如果一个`section`中有两个或更多的`h2`子元素，那么这个`section`中的所有`h2`都不会比此`section`中其他的`h2`显示得大。其他子元素的存在——无论它们是其他级别的标题、段落、表格、列表等等——都不会影响匹配结果。
1295 |
1296 | 有一点要说清楚：`:only-of-type`只涉及元素本身而非其他，看这个例子：
1297 |
1298 | ~~~css
1299 | p.unique:only-of-type {color: red;}
1300 | ~~~
1301 |
1302 | ~~~html
1303 |
1304 |
1307 | ~~~
1308 |
1309 | 这种情况下，两个段落都不会被选择。为什么呢？因为有两个段落是`div`的后代，他们都不能成为此类型的唯一元素。
1310 |
1311 | 在这里类名是不相关的。我们错在把“类型”当成一个一般描述，这是我们理解语言的方式。**类型**，在`:only-of-type`这里特指元素类型。因此`p.unique:only-of-type`意思是“选择`class`属性中包含`unique`的`p`元素，同时该元素是它和兄弟元素中的唯一一个`p`元素”，而**不是**“选择`class`属性中包含`unique`的`p`元素，同时该元素是它和兄弟元素中的唯一一个`class`属性包含`unique`的`p`元素”。
1312 |
1313 | #### 选择第一个和最后一个子元素
1314 |
1315 | 一个很常见的场景是，给某个元素的第一个或最后一个子元素添加特殊样式。最常见的例子是为一个导航栏的链接添加样式，为第一个或最后一个（或两者都）设置特别的视觉效果。过去需要为元素添加特殊的`class`，现在可以使用伪类来设置。
1316 |
1317 | 伪类`:first-child`用来选择某个元素的第一个子元素，看下面的代码：
1318 |
1319 | ~~~html
1320 | This paragraph has a 'unique' class.
1305 |This paragraph doesn't have a class at all.
1306 |
1321 |
1329 | ~~~
1330 |
1331 | 在这个例子中，是第一个子元素的元素是：第一个`p`、第一个`li`,以及`strong`和`em`元素。使用下面两条规则：
1332 |
1333 | ~~~css
1334 | p:first-child {font-weight: bold;}
1335 | li:first-child {text-transform: uppercase;}
1336 | ~~~
1337 |
1338 | 会得到如图1-27的结果：
1339 |
1340 | 
1341 |
1342 | *图1-27：给第一个子元素添加样式*
1343 |
1344 | 第一条规则把所有是其他元素第一个子元素的`p`设置为粗体，第二条规则把所有是其他元素（在 HTML 中，必须是`ol`或`ul`元素）第一个子元素的`li`设置为大写格式。
1345 |
1346 | 像前面提到的那样，最常见的错误是以为`p:first-child`会选择`p`元素的第一个子元素。记住伪类的本质，是为伪类绑定的元素添加一些影子类，假设把这些影子类真的添加代码里，看起来将会是这样：
1347 |
1348 | ~~~html
1349 | These are the necessary steps:
1322 |-
1323 |
- Insert key 1324 |
- Turn key clockwise 1325 |
- Push accelerator 1326 |
Do not push the brake at the same time as the accelerator.
1328 |
1350 |
1358 | ~~~
1359 |
1360 | 因此，要选择是其他元素第一个子元素的`em`元素，应该使用`em:first-child`。
1361 |
1362 | 与`first-child`对应的是`:last-child`。使用前面的例子，修改一下样式中的伪类，结果见图 1-28.
1363 |
1364 | ~~~css
1365 | p:last-child {font-weight: bold;}
1366 | li:last-child {text-transform: uppercase;}
1367 | ~~~
1368 |
1369 | ~~~html
1370 | These are the necessary steps:
1351 |-
1352 |
- Insert key 1353 |
- Turn key clockwise 1354 |
- Push accelerator 1355 |
Do not push the brake at the same time as the accelerator.
1357 |
1371 |
1379 | ~~~
1380 |
1381 | 
1382 |
1383 | *图1-28：给最后一个子元素添加样式*
1384 |
1385 | 第一条规则把是其他元素最后一个子元素的`p`设为粗体，第二条规则把所有是其他元素子元素的`li`元素设置为大写格式。如果想要选择最后一个段落中的`em`，可以使用`p:last-child em`，它将会选择所有是`p`元素后代的`em`，同时这个`p`是其他元素的最后一个子元素。
1386 |
1387 | 另外，两个伪类可以结合起来成为`:only-child`选择器的另一个版本，下面的两条规则选择相同的元素：
1388 |
1389 | ~~~css
1390 | p:only-child {color: red;}
1391 | p:first-child:last-child {background: red;}
1392 | ~~~
1393 |
1394 | 设置段落前景色和背景色为红色（不是个好主意）。
1395 |
1396 | #### 选择第一个和最后一个特定类型的元素
1397 |
1398 | 以选择第一个和最后一个子元素的形式，同样可以选择元素中第一个某种类型的子元素。这种方式可以实现选择某个元素中的第一个`table`元素，而不必关心它前面有哪些其他元素。
1399 |
1400 | ~~~css
1401 | table:first-of-type {border-top: 2px solid gray;}
1402 | ~~~
1403 |
1404 | 这条规则并**不是**作用于整个文档的——并不是选择整个文档的第一个`table`然而忽略其他所有`table`。它只会选择某个子元素里有表格的元素中的第一个`table`元素，而忽略整个元素的子元素中的其他`table`。因此，在图 1-29 的文档结构里，被圈起来的节点是被选中的元素。
1405 |
1406 | 
1407 | *图1-29：选择第一个表格类型*
1408 |
1409 | 在表格中，选择行中的第一个数据单元格而无论当前行中是否有头单元格存在：
1410 |
1411 | ~~~css
1412 | td:first-of-type {border-left: 1px solid red;}
1413 | ~~~
1414 |
1415 | 这条规则会选择下面每个行中的第一个数据单元格：
1416 |
1417 | ~~~html
1418 | These are the necessary steps:
1372 |-
1373 |
- Insert key 1374 |
- Turn key clockwise 1375 |
- Push accelerator 1376 |
Do not push the brake at the same time as the accelerator.
1378 |
1455 |
1463 | ~~~
1464 |
1465 | 如果把数字从`1`变成`2`，那么没有段落（`p`）被选中，中间的列表项（`li`）会被选中，如图1-31所示。
1466 |
1467 | ~~~css
1468 | p:nth-child(2) {font-weight: bold;}
1469 | li:nth-child(2) {text-transform: uppercase;}
1470 | ~~~
1471 |
1472 | 
1473 |
1474 | *图1-31：为第二个元素添加样式*
1475 |
1476 | 当然，也可以填入任何正数，如果你要选择是某个元素的第 93 个子元素的一个有序列表，可以使用`ol:nth-child(93)`（不是指子元素集合中的第93个有序列表，见下一节）。
1477 |
1478 | 更有用的是，你可以使用简单的算术表达式如`an + b`或`an - b`来定义循环选择，其中`a`和`b`是整数，`n`表示它自己。另外，`+ b`或`- b`的部分如果用不到的话可以去掉。
1479 |
1480 | 假如在一个无序列表中，每三个元素选择第一个，从整个列表的第一项开始，样式可以这样写：
1481 |
1482 | ~~~css
1483 | ul > li:nth-child(3n + 1) {text-transform: uppercase;}
1484 | ~~~
1485 |
1486 | 
1487 |
1488 | *图1-32：为每三个列表项中的第一个设置样式*
1489 |
1490 | 这种方式中的`n`可以是0、1、2、3、4、……直到无限大。浏览器会把`3n + 1`处理成1、4、7、10、13、……等等。如果去掉`+ 1`只留下`3n`，结果将是0、3、6、9、12、……等等。因为列表项中没有第0项——所有的元素计数都是从1开始，与数组计数不一样——第一个被这个表达式选中的元素将是列表的第三项。
1491 |
1492 | 元素从1开始计数，因此`:nth-child(2n)`将会选中第偶数个子元素，而`nth-child(2n + 1)`或`nth-child(2n - 1)`会选择第奇数个子元素。你可以记住这两个公式，或者使用另外两个可用于`:nth-child()`的特殊关键字：`even`和`odd`。想从表格的第一行开始每隔一行设置高亮？可以像这样，效果见图 1-33。
1493 |
1494 | ~~~css
1495 | tr:nth-child(odd) {background: silver;}
1496 | ~~~
1497 |
1498 | 
1499 |
1500 | *图1-33：为表格每隔一行设置样式*
1501 |
1502 | 显然，其他更复杂的选择需要使用表达式`an + b`。
1503 |
1504 | 要注意，当你想使用负数的`b`时，必须把加号去掉，否则整个选择器都将失效。下面的两条规则，只有第一条有效，第二条将会被解析器忽略：
1505 |
1506 | ~~~css
1507 | tr:nth-child(4n - 2) {background: silver;}
1508 | tr:nth-child(3n + −2) {background: red;}
1509 | ~~~
1510 |
1511 | 如果要选择从第 9 行开始的每一行，可以使用下面两种方式中的任意一个。他们很相似，都选择第 9 行开始的所有行，但后面的方式有更高的特度，将在第 3 章讨论。
1512 |
1513 | ~~~css
1514 | tr:nth-child(n + 9) {background: silver;}
1515 | tr:nth-child(8) ~ tr {background: silver;}
1516 | ~~~
1517 |
1518 | 如你所愿，有一个对应的伪类`:nth-last-child()`，它与`:nth-child()`效果是一样的，除了是从最后一个元素开始直到第一个元素。如果你想在表格中每隔一行设置高亮，同时需要保证最后一行是高亮的，下面的两条规则可以任选一个：
1519 |
1520 | ~~~css
1521 | tr:nth-last-child(odd) {background: silver;}
1522 | tr:nth-last-child(2n+1) {background: silver;} /* equivalent */
1523 | ~~~
1524 |
1525 | 假如 DOM 中的表格添加或移除了行，不需要添加或删除类。结构选择器会一直匹配更新了之后的 DOM 中表格的奇数行。
1526 |
1527 | 只要符合算术规则，每个元素都可以被既被`:nth-child()`又被`:nth-last-child()`选中，下面的规则，效果显示在图 1-34 中：
1528 |
1529 | ~~~css
1530 | li:nth-child(3n + 3) {border-left: 5px solid black;}
1531 | li:nth-last-child(4n - 1) {border-right: 5px solid black;}
1532 | ~~~
1533 |
1534 | 
1535 |
1536 | *图1-34：同时使用 :nth-child 和 :nth-last-child*
1537 |
1538 | 可以把伪类选择器写在一起：`:nth-child(1):nth-last-child(1)`，结合成一个啰嗦版的`:only-child`。除了要创建一个特度更高的选择器，否则没有什么理由这样写，但这确实是一个可选项。
1539 |
1540 | 可以使用 CSS 决定一个当列表中有多少列表项时，相应地为它们设置样式：
1541 |
1542 | ~~~css
1543 | li:only-child {width: 100%;}
1544 | li:nth-child(1):nth-last-child(2),
1545 | li:nth-child(2):nth-last-child(1) {width: 50%;}
1546 | li:nth-child(1):nth-last-child(3),
1547 | li:nth-child(1):nth-last-child(3) ~ li {width: 33.33%;}
1548 | li:nth-child(1):nth-last-child(4),
1549 | li:nth-child(1):nth-last-child(4) ~ li {width: 25%;}
1550 | ~~~
1551 |
1552 | 例子中，当列表中只有一项时，列表项的宽度是 100%；如果一个列表项既是第一项又是从最后一项开始的第二项，则表示列表总共有 2 个列表项，把它们的宽度设置为 50%；如果一个列表项既是第一个又是从最后一项开始的第三项，则把它和随后的两个兄弟项宽度设置为 33.33%；类似地，如果一个列表项既是第一项又是从最后一项开始的第四项，表示列表总共有四项，把它们宽度设置为 25%；
1553 |
1554 | #### 选择没第 n 个特定类型的子元素
1555 |
1556 | 类似之前的模式，`:nth-child()`和`:nth-last-child()`伪类存在类似的两个选择器：`:nth-of-type()`和`:nth-last-of-type()`。例如，在一个段落中，每隔一个选择链接子元素，从第二个开始选择，可以使用`p > a:nth-of-type(even)`。这个选择器将会忽略所有其他元素（`span`、`strong`等）而只考虑链接元素，见图 1-35：
1557 |
1558 | ~~~css
1559 | p > a:nth-of-type(even) {background: blue; color: white;}
1560 | ~~~
1561 |
1562 | 
1563 |
1564 | *图1-35：选择第偶数个链接*
1565 |
1566 | 如果想从最后一个链接开始选择，使用`p > a:nth-last-of-type(even)`即可。
1567 |
1568 | 还是像之前说过的一样，这些选择器是在兄弟元素中选择，而不是整个文档。每个元素都有它自己的兄弟元素集合，选择行为发生在每个分组里面。
1569 |
1570 | 还有，你也许想过，两个选择器结合在一起`:nth-of-type(1):nth-last- of-type(1)`会生成一个特度（优先级）更高的`:only-of-type`选择器。（我们真的会在第 3 章解释，我保证。）
1571 |
1572 | ### 动态伪类
1573 |
1574 | 除了结构性伪类之外，还有一些伪类是与（页面标记的）结构相关的，但与前述伪类的不同之处在于：页面的状态会在渲染之后发生变化，而这些伪类会随页面状态的变化而变化。换句话说，样式基于某些文档结构之外的规则来决定是否作用于文档片段，因而无法仅通过文档标记来推断文档片段展示的最终样式。
1575 |
1576 | 听起来好像我们引入了一些随机样式，但实际并非如此。相反，我们是基于某些无法预测的临时条件来应用样式。事实上，样式在何种情况下出现是被明确定义的。这样来想：在某项体育赛事中，每当主队得分，人们就会欢呼。你可能无法预测主队什么时候得分，但一旦主队得分，人群会欢呼这件事却是可以预测的。因此不可以预测的是事件出现的时刻，但可以预测是一旦事件出现时它会导致的行为。
1577 |
1578 | 例如锚点元素（`a`）,它（在 HTML 或其它类似文档标准中）定义了从一个文档到另一个文档的链接。锚点一直是锚点，但一些锚点指向的是已经访问过的文档页面，而另一些指向未曾访问过的页面。通过 HTML 标签是无法分辨这种差异的，因为在文档标记中所有的锚点都是一样的。只有通过对比文档中的链接与用户浏览器中的历史记录才能判断两种基本的锚点类型：已访问过的和未曾访问的过的。
1579 |
1580 | ### UI状态伪类
1581 |
1582 | | Name | Description |
1583 | | :------------- | :---------------------------------------------------------------------------------------------- |
1584 | | :enabled | 指启用的用户界面元素（如表单元素）；即可供输入。 |
1585 | | :disabled | 指禁用的用户界面元素(如表单元素)，即不能输入。 |
1586 | | :checked | 指已被用户或文档本身的默认值选中的单选按钮或复选框。 |
1587 | | :indeterminate | 指既不勾选也不取消勾选的单选按钮或复选框，这种状态只能通过 DOM 脚本来设置，而不是由于用户输入。 |
1588 | | :default | 指默认选择的单选按钮、复选框或选项。 |
1589 | | :valid | 指满足其所有数据有效性语义的用户输入。 |
1590 | | :invalid | 指不符合其所有数据有效性语义的用户输入。 |
1591 | | :in-range | 指用户输入的值介于最小值和最大值之间。 |
1592 | | :out-of-range | 指用户输入的值低于控件允许的最小值或高于最大值。 |
1593 | | :required | 指用户输入必须有一个设定值 |
1594 | | :optional | 指不需要设置值的用户输入。 |
1595 | | :read-write | 指用户可编辑的用户输入。 |
1596 | | :read-only | 指用户不可编辑的用户输入。 |
1597 |
1598 | #### 可用和禁用的 UI 元素
1599 |
1600 | 借助 DOM 脚本 和 HTML5， 可以把用户界面元素（或一组）设置为禁用（disabled）。
1601 |
1602 | 未禁用的元素被定义为可用。
1603 |
1604 | 使用 `:enabled` 和 `:disabled` 伪类选择两个状态。
1605 |
1606 | #### 选中状态
1607 |
1608 | 类型为 “checkbox” 和 “radio” 的 input 元素，Selectors level 3 提供 `:checked`状态伪类，以及`unchecked`。`:interminate`伪类匹配既不是 checked 也不是 unchecked。只有 radio 和 checkbox 可以被 check。其他所有元素和这两个元素的未选中状态都是`:not(:checked)`。
1609 |
1610 | “interminate”状态只能被 DOM 脚本或用户代理设置。可以用来表示用户没有选中或者取消选中某个元素。
1611 |
1612 | #### 默认选项伪类
1613 |
1614 | `:default`伪类。同名 radio 中最初被设置为选中的匹配`:default`，即便用户修改了状态不再匹配 `:checked`时。checkbox 在页面一加载就选中，`:default` 匹配。`select` 元素初始选中的 `option` 匹配 `:default`。
1615 |
1616 | ~~~css
1617 | [type="checkbox"]:default + label { font-style: italic; }
1618 | ~~~
1619 |
1620 | ~~~html
1621 |
1622 |
1623 | ~~~
1624 |
1625 | #### 选项伪类
1626 |
1627 | `:required`匹配表单必填项，表示设置了 HTML5 的`required`属性。`:optional`表示没有`required`属性，或者`required`属性有值`false`。
1628 |
1629 | ~~~css
1630 | input:required { border: 1px solid #f00;}
1631 | input:optional { border: 1px solid #ccc;}
1632 | ~~~
1633 |
1634 | ~~~html
1635 |
1636 |
1637 |
1638 | ~~~
1639 |
1640 | 第一个元素匹配`:required`，后面两个匹配`:optinal`。
1641 |
1642 | ~~~css
1643 | input[required] { border: 1px solid #f00;}
1644 | input:not([required]) { border: 1px solid #ccc;}
1645 | ~~~
1646 |
1647 | 不是表单 input 的元素既不是必选项也不是可选项。
1648 |
1649 | #### 合法性伪类
1650 |
1651 | `:valid` `:invalid`
1652 |
1653 | 用于可验证数据合法性的元素，`div`永远不会匹配这两个选择器。
1654 |
1655 | _**这两个伪类由用户代理自己的样式系统决定，可能不会如你预期。例如 2017 年底在多个用户代理中，空的 email input 会匹配 `:valid`，尽快实际上 null 输入不是一个合法的 email 地址。除非验证的使用习惯改进，最好谨慎对待合法性伪类。 **_
1656 |
1657 | #### 范围伪类
1658 |
1659 | HTML5 的`min`和`max`属性。`:in-range`和`:out-of-range`伪类。
1660 |
1661 | #### 可变性伪类
1662 |
1663 | 可编辑的 input。
1664 |
1665 | `:read-write`、`：read-only`
1666 |
1667 | 例如，在 HTML 中，一个非禁用、非只读的输入元素是 :read-write，任何带有 contenteditable 属性的元素也是如此。其他所有元素都是 :read-only
1668 |
1669 | ### `:target`伪类
1670 |
1671 | URL 中包含一个片段标识码，在 CSS 中叫做 *target*，可使用`:target`伪类为其添加样式。
1672 |
1673 | ~~~
1674 | http://www.w3.org/TR/css3-selectors/#target-pseudo
1675 | ~~~
1676 |
1677 | 多亏了 :target，你可以在文档中突出显示任何目标元素，或者你可以为不同类型的目标元素设计不同的风格--例如，为目标标题设计一种风格，为目标表格设计另一种风格，等等。
1678 |
1679 | :target 样式在两种情况下不会被应用。
1680 |
1681 | 如果页面是通过一个没有片段标识符的URL访问的。
1682 |
1683 | 如果通过具有片段标识符的URL访问页面，但该标识符不匹配文档中的任何元素。
1684 |
1685 | ### `:lang`伪类
1686 |
1687 | ### 否定伪类
1688 |
1689 | Selector level 3 `:not()`
1690 |
1691 | 括号中填写**简单选择器**，简单选择器在 W3C 的定义：类型选择器、通配选择器、属性选择器、类选择器、ID选择器或伪类中的一个。简单选择器是不包含祖先-后代关系的选择器。
1692 |
1693 | ## 伪元素选择器
1694 |
1695 | CSS2 定义了四个基本的微元素选择器，元素的第一个字母，元素的第一行，before 和 after。
1696 |
1697 | ### 样式化第一个字母
1698 |
1699 | ~~~css
1700 | p::first-letter {color: red;}
1701 | ~~~
1702 |
1703 | ### 样式化第一行
1704 |
1705 | ~~~css
1706 | p::first-letter {color: red;}
1707 | ~~~
1708 |
1709 | ### `::first-letter`和`::first-line`的限制
1710 |
1711 | 只能用于块级元素，不能用于行内元素。允许使用的属性：
1712 |
1713 | |::first-letter| ::first-line|
1714 | |-----|-----|
1715 | |All font properties|All font properties
1716 | |All background properties|All background properties
1717 | |All text decoration properties|All margin properties
1718 | |All inline typesetting properties|All padding properties
1719 | |All inline layout properties|All border properties
1720 | |All border properties|All text decoration properties
1721 | |box-shadow|All inline typesetting properties
1722 | |color|color
1723 | |opacity|opacity
1724 |
1725 | ### 在元素之前或之后样式化（或创建）内容
1726 |
1727 | ~~~css
1728 | h2::before {content: "]]"; color: silver;}
1729 | ~~~
1730 |
1731 | ~~~css
1732 | body::after {content: "The End.";}
1733 | ~~~
1734 |
1735 | ## 总结
1736 |
1737 | 通过使用基于文档语言的选择器，作者可以创建适用于大量类似元素的CSS规则，就像他们可以构建适用于非常狭窄环境的规则一样容易。将选择符和规则组合在一起的能力使样式表保持紧凑和灵活，这顺便带来了更小的文件大小和更快的下载时间。
1738 |
1739 | 选择符是用户代理通常必须正确处理的一件事，因为无法正确解释选择符几乎会阻止用户代理使用CSS。反过来说，对于作者来说，正确编写选择符是至关重要的，因为错误会阻止用户代理按照预期的方式应用样式。正确理解选择符以及如何将它们组合起来的一个不可或缺的部分，是对选择符与文档结构的关系，以及在决定元素如何被设计成风格时，继承和级联等机制如何发挥作用的深刻理解。
1740 |
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-1.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-10.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-11.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-12.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-13.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-14.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-15.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-16.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-17.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-18.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-19.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-2.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-20.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-21.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-22.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-23.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-23.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-24.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-25.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-25.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-26.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-26.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-27.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-27.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-28.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-28.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-29.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-29.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-3.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-30.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-30.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-31.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-31.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-32.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-33.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-33.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-34.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-34.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-35.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-35.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-4.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-5.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-6.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-7.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-8.png
--------------------------------------------------------------------------------
/docs/2_Selectors/figure1-9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/2_Selectors/figure1-9.png
--------------------------------------------------------------------------------
/docs/3_Specificity_and_the_Cascade/README.md:
--------------------------------------------------------------------------------
1 | # 特度和层叠
2 |
3 | _**继承**_机制指元素的属性值被传递给它的后代。用户代理通过继承和_**特度**_决定应用哪些（样式）值被应用于元素，这个处理过程叫做_**层叠*_.
4 |
5 | 本章三个机制：特度、继承和层叠。
6 |
7 | ## 特度
8 |
9 | ### 声明和特度
10 | ### 全局选择器特度
11 | ### ID和属性选择器特度
12 | ### 行内样式特度
13 | ### 重要性
14 |
15 | ## 继承
16 |
17 | ## 层叠
18 |
19 | ### 按重要性和来源排序
20 | ### 按特度排序
21 | ### 按顺序排序
22 | ### 非CSS显示标识
23 |
24 | ## 总结
25 |
26 | ### 特度注意点
27 | - 特度优先级值 x，y，z，w 分别对应于
28 | - x：行内样式
29 | - y：ID 选择器
30 | - z：类、属性、伪类选择器
31 | - w：标签、伪元素选择器
32 | - 添加了 `!important` 标记的属性需单独考虑
33 | -html 元素没有设置 background 属性但 body 元素设置了 background 时，body 的 background 属性会传递给 html 元素，继承机制的唯一例外
34 | - 尽量不要使用全局通配符 `*`，会破坏继承（被破坏的元素属性可使用值 `inherit` 修复）
35 | - 标签状态添加样式的建议顺序：link-visited-focus-hover-active LVFHA
36 |
37 | ### 元素应用样式的规则
38 | 1. 找出所有选择器可以匹配此元素的规则
39 | 2. 按照 explicit weight 排序所有声明，所有标记为 !important 的规则拥有更高的权重
40 | 3. 按照样式来源排序所有声明，三个 origin：author、reader 和 user angent；绝大部分环境中 reader !important > author !important > author > reader > user agent
41 | 4. 按照特度排序所有声明
42 | 5. 按照样式表或文档中的位置排序所有声明，在后面的规则拥有更高权重。Import 的样式表插入在当前样式表的最前面
43 |
--------------------------------------------------------------------------------
/docs/4_Values_and_Units/README.md:
--------------------------------------------------------------------------------
1 | # 值和单位
2 |
3 | ## 关键字、字符串和其他文本值
4 | 1. CSS3 三个 global keywords：inherit、initial、unset
5 | 1. inherit 也可设置默认不继承的属性
6 | 2. initial 设置为默认值，属性没有默认值时设置为用户代理设置的值
7 | 3. unset 当属性可继承时行为与 inherit 相同，非继承属性时行为与 initial 相同
8 | 4. IE 11 不支持它们，也不支持 all
9 | 5. 属性 all 的值只能使用 global keywords
10 | 2. 字符串值，使用单引号或双引号包起来的直接引用的值，可用 \ 在行末断行，真的要插入换行符使用 \A
11 | 3. url值使用相对地址时，相对的是样式文件的位置，url和左括号之间不能插入空格
12 | 4. images：一般是 url 值，或者 image-set()，或者 gradients 渐变图片
13 | 5. 有些属性接受标识符值，用户自定义的 identifier
14 |
15 | ## 数值和百分比
16 | 1. 整数值 +- 符号，一些属性超出取值范围的时候，取距离最近的值，z-index 没有严格范围 ±1,073,741,824 (±230)
17 | 2. 数值，包含整数值和浮点值，超出范围时一些属性会失效，一些会同整数值行为
18 | 3. 百分比一般是相对于其他值的值，任何接受百分比值的属性将定义对允许的百分比值范围的任何限制，还将定义相对计算百分比的方式。
19 | 4. 分数值，标签 fr，用于 Grid Layout
20 |
21 | ## 距离
22 | 度量长度，长度都由正/负的数值加上标签（缩写的长度单位），0 不需要跟随单位
23 |
24 | 1. 绝对长度单位
25 | 1. in、cm、mm、q（1cm = 40q）、pt（1in = 72pt）、pc（1pc = 12pt）、px（1/96 in defined in css）
26 | 2. CSS 2.1 / 3 建议 96 ppi，多数显示器高于此数值，打印设备假定 96px 为1inch
27 | 2. 分辨率单位，用于 Media query 和 响应式设计
28 | 1. dpi 每英寸点数，打印纸点、LED 屋里像素、电子墨水显示器 Kindle
29 | 2. dpcm 同上，每厘米点数
30 | 3. dppx 每个 CSS px 单位的点数，CSS3 约定比率 1dppx 等于 96dpi
31 | 3. 相对长度单位
32 | 1. em，相对于本元素 font-size 的值，当设置 font-size 属性时，em 是相对于父元素的 font-size；名称来源于小写字母 m 的宽度， 但 CSS 中并不精确等于
33 | 2. ex，小写字母 x 的高度，不同字体有不同的 x 高度
34 | 3. rem，基于根元素 font-size 值，基于绝对 px 而非相对字体大小 ，html {font-size: 75%;} 得到值12px 而非 75%（假设默认 font-size 是 16px）；支持 initial 关键字的浏览器中，如果根元素没有设置字体大小，font-size: 1rem 等于 font-size: initial
35 | 4. Viewport 相对单位， CSS3 中新增，依据视口尺寸百分之一
36 | 1. vw、vh、vmin、vmax（视口宽高中较小或较大的一个）
37 |
38 | ## 计算值
39 | 1. calc() 可进行简单四则运算，可以使用括号
40 | 2. 可使用在这些值类型允许使用的地方：长度、频率、角度、时间、百分比、数值、整数
41 | 3. `+ -` 号两边必须使用同样的值类型，`*` 号一边必须是数值，/ 号右侧必须是数值，不能 0 除
42 | 4. `+ -` 号两边必须有空格， * / 非必须
43 | 5. 规范要求用户代理必须支持最少 20 terms
44 |
45 | ## 属性值
46 | 1. `attr()` 少数 CSS 属性允许使用当前元素 HTML 属性的值：`p::before {content: "[" attr(id) "]";}`
47 | 2. `input[type="text"] {width: attr(maxlength em);}`
48 | 3. 2016 年底还都不支持
49 |
50 | ## 颜色
51 | 1. 命名颜色， 16 to 148 in CSS Color Module Level 4 base on X11 RGB
52 | 2. RGB 和 RGBa 颜色
53 | 1. `rgb(R, G, B)` 取值 0 - 255、0% - 100%，超出范围取上下限，浮点数值四舍五入为 0 - 255 整数
54 | 2. `Rgba(R, G, B, a)`，a 取值 0 - 1，超出范围无效或重置为上下限，不能使用百分比
55 | 3. 十六进制 RGB
56 | 4. 十六进制 RGBa，2017 年底 Firefox 和 Safari 支持， Chrome 和 Opera 试验性实现
57 | 3. HSL 和 HSLa 颜色：CSS3 新增， H 色调 0 - 360、 S 饱和 0 - 100%、 L 亮度 0 - 100%
58 | 4. 颜色关键字，可使用在任何允许使用颜色值的地方
59 | 1. `transparent` 完全透明颜色，背景颜色默认值，常用于定义渐变
60 | 2. `currentColor` 当前元素 color 属性的值
61 |
62 | ## 角度
63 | 1. 数值 + 单位：deg 360角度、grad 400一圈、rad 弧度 2π、turn 一圈
64 |
65 | ## 时间和频率
66 | 1. 数值 + s/ms
67 | 2. 数值 + Hz/kHz 忽略大小写
68 |
69 | ## 位置
70 | 1. 取值顺序
71 | ~~~
72 | [
73 | [ left | center | right | top | bottom | These are the necessary steps:
1456 |-
1457 |
- Insert key 1458 |
- Turn key clockwise 1459 |
- Push accelerator 1460 |
Do not push the brake at the same time as the accelerator.
1462 |`，不忽略空格 59 | 5. `white-space: nowrap;` 防止wrap，只有使用 `
` 才能换行，参照 HTML4 的 `` 60 | 6. `tab-size: | ` tab 占几个空格，用于块级元素，继承 61 | 7. `white-space`设置了合并空格，`tab-size`会被忽略，还会被计算但不可见 62 | 8. 目前 WebKit and Gecko (as –moz-tab-size) 只支持 `Integer` 63 | 64 | | value | Whitespace | Line feeds | Auto line wrapping | 65 | ----|----|----|---- 66 | pre-line | Collapsed | Honored | Allowed 67 | normal | Collapsed | Ignored | Allowed 68 | nowrap | Collapsed | Ignored | Prevented 69 | pre | Preserved | Honored | Prevented 70 | pre-wrap | Preserved | Honored | Allowed 71 | 72 | ## Wrapping and Hyphenation (包裹和断字) 73 |  74 | 1. `hyphens` 决定 word 在何处 break，高度依赖具体语言 75 | 2. `word-break`: `normal | break-all | keep-all` 76 | 3. soft wrap 指文字太长，由用户代理或 OS 决定换行，`word-break` 可修改行为（换行符、`
` 为 hard wrap） 77 | 4. `break-all` 时不显示 hyphens（`line-break`属性会影响行为） 78 | 5. `keep-all` 去除所有单词中的 soft wrap，行为类似 `white-space: pre;` 79 | 6. `line-break`，As we just saw, `word-break` can affect how lines of text are soft wrapped in CJK text. The `line-break` property also affects such soft wrapping, specifically how wrapping is handled around CJK-specific symbols and around non-CJK punctuation (such as exclamation points, hyphens, and ellipses) that appears in text declared to be CJK. 80 | 7. `overflow-wrap / word-wrap`: `normal` `break-word` 81 | 8. `break-word` 和 `word-break: break-all` 的区别： `word-wrap: break-word` 当有可能使用空白断行时会使用而不会断词， `word-break: break-all `不管这些，会直接断单词 82 | 83 | ## Writing Modes 84 | 1. `writing-mode`: `horizontal-tb | vertical-rl | vertical-lr`，一些细节：block 方向和 inline 方向 85 | 2. `text-orientation` 字体方向 86 | 3. direction: `ltr | rtl` 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /docs/7_Basic_Visual_Format/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/7_Basic_Visual_Format/1.png -------------------------------------------------------------------------------- /docs/7_Basic_Visual_Format/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/7_Basic_Visual_Format/2.png -------------------------------------------------------------------------------- /docs/7_Basic_Visual_Format/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/7_Basic_Visual_Format/3.png -------------------------------------------------------------------------------- /docs/7_Basic_Visual_Format/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/7_Basic_Visual_Format/4.png -------------------------------------------------------------------------------- /docs/7_Basic_Visual_Format/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN/a229db194f2ca0d3ab96c19d478b7f82544db307/docs/7_Basic_Visual_Format/5.png -------------------------------------------------------------------------------- /docs/7_Basic_Visual_Format/README.md: -------------------------------------------------------------------------------- 1 | # 基本视觉格式化 2 | 3 | ## 基本盒模型 4 |  5 | 1. 所有元素都生成一个或多个矩形盒 element boxes 6 | 2. `background` 默认在 `padding-area` 7 | 3. border color 默认取前景色 text color 8 | 4. 普通流，从左向右、从上向下，非西语流的方向可能会不同 9 | 5. `inline-block` box 表现类似替换元素 10 | 6. containing block，每个元素盒有个包含块，layout context，通常是父元素盒 11 | 7. html 元素是 initial containing block，It's unique in that the viewport— 12 | the browser window in screen media, or the printable area of the page in print media—determines its dimensions, not the size of the content of the root element. 13 | 14 | ## 改变元素显示 15 |  16 |  17 | 1. `display`: `block` `inline` 等修改的是元素的 display role，而非把元素变成块级或行内元素 18 | 2. `box-sizing` 属性可用于所有接受宽度或高度值的元素 19 | 3. 七个属性值（`margin-left border-left padding-left width padding-right border-right margin-right`）相加等于包含块的宽度，通常（都是块级时，不设置 `box-sizing`）是父元素的`width`，只有 `width` 和 `margin` 可以设置为 `auto`，其他属性需要设置为特定值或 `0`，只有 `margin` 可为负值 20 | 4. 违反上条时，将把 `margin-right` 强制设置为 `auto`， overconstrained 21 | 5. 使用百分比单位时，相对于包含块的宽度，`border` 无法使用百分比单位 22 | 6. 块级替换元素规则与上述规则相同（img） 23 | 7. 垂直方向七个属性值（类似宽度）相加等于包含块的高度，与宽度不同的是： 24 | 8. 普通流中，如果 `margin-top` 或 `margin-bottom` 设置为 `auto`，将会自动设置为 `0` 25 | 9. 使用百分比高度时，`height` 相对于包含块高度，但当包含块高度为 `auto` 时，`height` 被重置为 `auto` 26 | 10. 百分比的 `margin-top` `margin-bottom` `padding-top` `padding-bottom` 都相对于包含块**宽度** 27 | 11. 普通流块盒使用 `height: auto` 时，正好高到包含它所有的 inline 内容的 line boxes；有唯一块级子元素时，默认高度从子元素 outer border 顶部到 bottom border 底部，不包含 margin；但当块有 top 或 bottom padding 或border时 ，高度将从outer-top margin 顶部到 outer-bottom margin 底部 28 | 12. 垂直方向的 margin 折叠，存在负值时，与正值相加 29 | 13. `list-item` 的 marker 不是 list item 的 content-area 的一部分 30 | 31 | ## 行内元素 32 | 33 | 1. 行内元素的 content area，每个字符的 em boxes 拼在一起；替换元素的是元素自然高度加上margins borders 或 padding [参考](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align 34 | ) 35 | 2. Inline box 是 content area 加上下两个 half-leading，高度等于 `line-height`；替换元素的 inline box 高度等于 content area，因为没有 leading 36 | 3. line box 把该行最高和最低 inline boxes 包裹起来的最矮的box，参见第六章文本属性 37 | 4. content area 类似于块盒的 content box 38 | 5. inline 元素的背景应用于 content area 加上 padding （padding-area） 39 | 6. Any border on an inline element surrounds the content area plus any padding and border. 40 | 7. padding borders margins 在非替换元素上不会对 inline 元素或它的盒产生垂直效果，不影响元素行内盒的高度（以及 line box 的高度） 41 | 8. 替换元素的 margins 和 borders 影响行内盒高度，和 line box 高度 42 | 9. 决定行内的每个元素的行内盒高度的步骤： 43 | 1. 找出不是 inline 元素后代的 inline 非替换元素和文本的 font-size 和 line-height 值，combine them；line-height 减去 font-size 算出 leading 44 | 2. 找出每个替换元素的 height，margin，border，padding 的值加在一起 45 | 3. 对每个 content area，找出它高出整行的 baseline 多少以及低于 baseline 多少；这需要知道每个元素、匿名文本和行本身的 baseline，line them all up；替换元素的底边在整行 baseline 上 46 | 4. 根据元素的 vertical-align 值决定垂直偏移量，元素的inline box会移动多远，修改它高于或低于baseline多少 47 | 5. 计算最终的 line box height，highest inline box top 与 baseline的距离 + lowest inline box bottom 与 baseline 的距离 48 | 10. 行高是由组成它的元素和文本等其他内容决定的，`line-height` 属性只影响行内元素和其他行内内容，而非块级元素；只有当块级元素内包含行内内容的时候，`line-height` 会作用于行内内容 49 | 11. 12px 24px 文本， line-height 设置为12px，文本默认 all baseline-aligned 50 |  51 | 12. `vertical-align` 属性值：结合上一章 52 | 1. `top`，元素 inline box top 与 containing line box top 对齐 53 | 2. `bottom`，元素 inline box bottom 与 containing line box bottom 对齐 54 | 3. `text-top`，元素 inline box top 与 parent 的 content area top 对齐 55 | 4. `text-bottom`，元素 inline box bottom 与 parent 的 content area bottom 对齐 56 | 5. `middle`，元素 inline box 垂直中点与 parent 的 baseline 上方 0.5ex 处对齐 57 | 6. `super`，元素 content area 和 inline boex 上移，距离由用户代理确定 58 | 7. `sub`，与 super 同，下移 59 | 8. 百分比，元素上移或下移距离，百分比相对于元素的 line-height 60 | 13. `line-height` 对行高的影响（文本元素添加border等的效果） 61 | 14. 使用 `line-height` 最好方式是使用数值，为所有元素设置一样的 scale factor；字体的baseline 位置由字体本身决定，大部分字体的字符小于 em 块，一些 cursive 字体例外，会大于 em 块 62 | 15. inline 元素的 border 是由 `font-size` 而非 line-height 控制，surround the content area 63 | 16. 添加 `padding` 可以使 `border` 远离 text 本身；`padding` 和 `border` 都不影响 line box 的创建和布局 64 | 17. CSS2.1规范 “This will cause the borders on subsequent lines to paint over the borders and text of previous lines.” 同样适用于 `background`，设置`padding` 会使 `background` 区域扩展，覆盖上一行 65 | 18. `box-decoration-break`: `slice | clone`，inline 元素被分割成多行时的分隔方式，切割还是克隆，包括 background、padding、border 等： 66 |  67 | 19. 象形文字的字体实际 render 与 em box 行为 68 | 20. 替换元素具有固有的宽高，元素的 box properties：content、margins、borders、padding 用来定义 inline box，都可以生效，底部 margin 的 outline edge 与 baseline 对齐 69 | 21. 替换元素 `line-height` 不会生效，但依然具备 `line-height` 值，计算 `vertical-align` 属性值时使用，以及替换元素的后代元素 70 | 22. 块级元素中的图片，对齐baseline，导致底部可能有几 px 空白，table cell、div 等，可定义 img display block 变为块级或者设置容器 line-height 1px 71 | 23. An inline-block element relates to other elements and content as an inline box. In other words, it’s laid out in a line of text just as an image would be, and in fact, inline-block elements are formatted within a line as a replaced element. 72 | 24. inline-box width 未定义或为 `auto`，element box shrink to fit content 73 | 25. CSS is moving to a system where there are two kinds of display: **the outer display type and the inner display type**. Value keywords like `block` and `inline` represent the outer display type, which provides how the display box interacts with its surroundings. The inner display, in this case flow, describes what should happen inside the element. 74 | 75 | | Old Values | New Values | 76 | ---|------------ 77 | block | block flow 78 | inline | inline flow 79 | inline-block | inline flow-root 80 | list-item | list-item block flow 81 | 82 | As of late 2017, flow and flow-root were supported by Firefox and Chrome, but no other browsers. 83 | 84 | 26. 其他 display 属性值 85 | 27. The computed value of `display` can change if an element is floated or positioned. It can also change when declared for the root element. In fact, the values `display`, `position`, and `float` interact in interesting ways. 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # CSS权威指南（第四版） 2 | 3 | 《CSS权威指南（CSS: The Definitive Guide）》是**Eric A. Meyer**所著，第三版发布于2006年。从2012年开始，CSS权威指南的第四版开始以分章节的形式由**O'Reilly**发行，目前已经发布了十章。 4 | 5 | 《CSS权威指南（第四版）》的第一章《CSS and Documents》在O'Reilly上是免费提供的，其它章节则不是。因此，这里将提供第一章的完整翻译，其后的章节则以重点总结和摘要翻译的形式提供。 6 | 7 | 如果您喜欢本书内容，请至[此处](http://www.oreilly.com/pub/au/52)购买英文原版，期待第四版尽快发行完整版并有国内出版商引入中文版。 8 | 9 | CSS的标准更新非常快，本书的第一章写于2012年，现在来看有些内容已经略有落后，而等到第四版的中文版引入国内时，又不知何年何月了。 10 | 11 | 12 | 任何问题和反馈，欢迎到 [https://github.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN](https://github.com/Jack-Sparrow/CSS-The-Definitive-Guide-4th-zh-CN) 讨论。 13 | 14 | 15 | 16 | ### Update: 17 | 18 | 英文正式版已于 2017 年 10 月正式出版：[O'Reilly 官网](http://shop.oreilly.com/product/0636920012726.do) 19 | 20 | 亚马逊中国已经有售。 -------------------------------------------------------------------------------- /docs/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # 目录 2 | 3 | * [简介](README.md) 4 | * [第一章 CSS和文档](1_CSS_and_Documents/README.md) 5 | * [Web样式历史简介](1_CSS_and_Documents/README.md#web样式历史简介) 6 | * [元素](1_CSS_and_Documents/README.md#元素) 7 | * [替换元素和非替换元素](1_CSS_and_Documents/README.md#替换元素和非替换元素) 8 | * [元素显示角色](1_CSS_and_Documents/README.md#元素显示角色) 9 | * [结合CSS和HTML](1_CSS_and_Documents/README.md#结合css和html) 10 | * [`link`标签](1_CSS_and_Documents/README.md#link标签) 11 | * [`style`元素](1_CSS_and_Documents/README.md#style元素) 12 | * [`@import`指令](1_CSS_and_Documents/README.md#import指令) 13 | * [HTTP链接](1_CSS_and_Documents/README.md#http链接) 14 | * [行内样式](1_CSS_and_Documents/README.md#行内样式) 15 | * [样式表内容](1_CSS_and_Documents/README.md#样式表内容) 16 | * [标记](1_CSS_and_Documents/README.md#标记) 17 | * [规则结构](1_CSS_and_Documents/README.md#规则结构) 18 | * [空格处理](1_CSS_and_Documents/README.md#空格处理) 19 | * [CSS注释](1_CSS_and_Documents/README.md#css注释) 20 | * [媒体查询](1_CSS_and_Documents/README.md#媒体查询) 21 | * [使用](1_CSS_and_Documents/README.md#使用) 22 | * [简单媒体查询](1_CSS_and_Documents/README.md#简单媒体查询) 23 | * [媒体类型](1_CSS_and_Documents/README.md#媒体类型) 24 | * [媒体描述符](1_CSS_and_Documents/README.md#媒体描述符) 25 | * [媒体特性描述符和值类型](1_CSS_and_Documents/README.md#媒体特性描述符和值类型) 26 | * [特性查询](1_CSS_and_Documents/README.md#特性查询) 27 | * [总结](1_CSS_and_Documents/README.md#总结) 28 | * [第二章 选择器](2_Selectors/README.md) 29 | * [基本样式规则](2_Selectors/README.md#基本样式规则) 30 | * [元素选择器](2_Selectors/README.md#元素选择器) 31 | * [声明和关键字](2_Selectors/README.md#声明和关键字) 32 | * [分组](2_Selectors/README.md#分组) 33 | * [分组选择器](2_Selectors/README.md#分组选择器) 34 | * [分组声明](2_Selectors/README.md#分组声明) 35 | * [分组一切](2_Selectors/README.md#分组一切) 36 | * [旧浏览器中的新元素](2_Selectors/README.md#旧浏览器中的新元素) 37 | * [类和ID选择器](2_Selectors/README.md#类和id选择器) 38 | * [类选择器](2_Selectors/README.md#类选择器) 39 | * [多类](2_Selectors/README.md#多类) 40 | * [ID选择器](2_Selectors/README.md#id选择器) 41 | * [决定使用Class还是ID](2_Selectors/README.md#决定使用class还是id) 42 | * [属性选择器](2_Selectors/README.md#属性选择器) 43 | * [简单属性选择器](2_Selectors/README.md#简单属性选择器) 44 | * [基于准确属性值选择](2_Selectors/README.md#基于准确属性值选择) 45 | * [基于部分属性值选择](2_Selectors/README.md#基于部分属性值选择) 46 | * [特定的属性选择器](2_Selectors/README.md#特定的属性选择器) 47 | * [忽略大小写标识符](2_Selectors/README.md#忽略大小写标识符) 48 | * [使用文档结构](2_Selectors/README.md#使用文档结构) 49 | * [理解父-子关系](2_Selectors/README.md#理解父-子关系) 50 | * [后代选择器](2_Selectors/README.md#后代选择器) 51 | * [选择子元素](2_Selectors/README.md#选择子元素) 52 | * [选择相邻兄弟元素](2_Selectors/README.md#选择相邻兄弟元素) 53 | * [选择跟随兄弟元素](2_Selectors/README.md#选择跟随兄弟元素) 54 | * [伪类选择器](2_Selectors/README.md#伪类选择器) 55 | * [组合伪类](2_Selectors/README.md#组合伪类) 56 | * [结构性伪类](2_Selectors/README.md#结构性伪类) 57 | * [动态伪类](2_Selectors/README.md#动态伪类) 58 | * [UI状态伪类](2_Selectors/README.md#ui状态伪类) 59 | * [`:target`伪类](2_Selectors/README.md#target伪类) 60 | * [`:lang`伪类](2_Selectors/README.md#lang伪类) 61 | * [否定伪类](2_Selectors/README.md#否定伪类) 62 | * [伪元素选择器](2_Selectors/README.md#伪元素选择器) 63 | * [样式化第一个字母](2_Selectors/README.md#样式化第一个字母) 64 | * [样式化第一行](2_Selectors/README.md#样式化第一行) 65 | * [`::first-letter`和`::first-line`的限制](2_Selectors/README.md#first-letter和first-line的限制) 66 | * [在元素之前或之后样式化（或创建）内容](2_Selectors/README.md#在元素之前或之后样式化或创建内容) 67 | * [总结](2_Selectors/README.md#总结) 68 | * [第三章 特度和层叠](3_Specificity_and_the_Cascade/README.md) 69 | * [特度](3_Specificity_and_the_Cascade/README.md#特度) 70 | * [声明和特度](3_Specificity_and_the_Cascade/README.md#声明和特度) 71 | * [全局选择器特度](3_Specificity_and_the_Cascade/README.md#全局选择器特度) 72 | * [ID和属性选择器特度](3_Specificity_and_the_Cascade/README.md#id和属性选择器特度) 73 | * [行内样式特度](3_Specificity_and_the_Cascade/README.md#行内样式特度) 74 | * [重要性](3_Specificity_and_the_Cascade/README.md#重要性) 75 | * [继承](3_Specificity_and_the_Cascade/README.md#继承) 76 | * [层叠](3_Specificity_and_the_Cascade/README.md#层叠) 77 | * [按重要性和来源排序](3_Specificity_and_the_Cascade/README.md#按重要性和来源排序) 78 | * [按特度排序](3_Specificity_and_the_Cascade/README.md#按特度排序) 79 | * [按顺序排序](3_Specificity_and_the_Cascade/README.md#按顺序排序) 80 | * [非CSS显示标识](3_Specificity_and_the_Cascade/README.md#非css显示标识) 81 | * [总结](3_Specificity_and_the_Cascade/README.md#总结) 82 | * [特度注意点](3_Specificity_and_the_Cascade/README.md#特度注意点) 83 | * [元素应用样式的规则](3_Specificity_and_the_Cascade/README.md#元素应用样式的规则) 84 | * [第四章 值和单位](4_Values_and_Units/README.md) 85 | * [关键字、字符串和其他文本值](4_Values_and_Units/README.md#关键字、字符串和其他文本值) 86 | * [数值和百分比](4_Values_and_Units/README.md#数值和百分比) 87 | * [距离](4_Values_and_Units/README.md#距离) 88 | * [计算值](4_Values_and_Units/README.md#计算值) 89 | * [属性值](4_Values_and_Units/README.md#属性值) 90 | * [颜色](4_Values_and_Units/README.md#颜色) 91 | * [角度](4_Values_and_Units/README.md#角度) 92 | * [时间和频率](4_Values_and_Units/README.md#时间和频率) 93 | * [位置](4_Values_and_Units/README.md#位置) 94 | * [自定义值](4_Values_and_Units/README.md#自定义值) 95 | * [第五章 字体](5_Fonts/README.md) 96 | * [第六章 文本](6_Text/README.md) 97 | * [第七章 基本视觉格式化](7_Basic_Visual_Format/README.md) 98 | --------------------------------------------------------------------------------