w3cschool-CSS

发表于 | 分类于 ，

知识点

  • 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。如果忽略了波浪号，则说明需要完成完全值匹配。
  • 根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。比如：Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。
  • 内边距是 padding
  • 当为链接的不同状态设置样式时，请按照以下次序规则：
    a:hover 必须位于 a:link 和 a:visited 之后
    a:active 必须位于 a:hover 之后

white-space

  • 当 white-space 属性设置为 normal 时，会合并所有的空白符，并忽略换行符。
  • 当 white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符。
  • 当 white-space 属性设置为 nowrap 时，它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。
  • 当 white-space 属性设置为 pre-wrap 时，浏览器不仅会保留空白符并保留换行符，还允许自动换行。
  • 当 white-space 属性设置为 pre-line 时，浏览器会保留换行符，并允许自动换行，但是会合并空白符，这是与 pre-wrap 值的不同之处。

padding和border-spacing的不同？

  • 表格内边距 如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性
  • border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

类选择器还是 ID 选择器？

在类选择器这一章中我们曾讲解过，可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素，而且它还可以应用到更多元素。

  • 区别 1：只能在文档中使用一次
    与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

  • 区别 2：不能使用 ID 词列表
    不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

  • 区别 3：ID 能包含更多含义
    类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。

  • 请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

first-child

  • 例子 1 - 匹配第一个<p> 元素

    1
    2
    3
    p: first-child {
      color: red;
      }

  • 例子 2 - 匹配所有 <p> 元素中的第一个 <i> 元素

    1
    2
    3
    p > i:first-child {
      font-weight:bold;
      }

  • 例子 3 - 匹配所有作为第一个子元素的 <p>元素中的所有 <i>元素

    1
    2
    3
    p:first-child i {
      color:blue;
       }