css笔记3

• CSS 多类选择器,通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

  <p class="important warning">
  This paragraph is a very important warning.
  </p>
  
  
  .important {font-weight:bold;}
  .warning {font-style:italic;}
  .important.warning {background:silver;}  //同时包含这两个类

   

• 类选择器和id选择器的区别：

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

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

   

• 根据部分属性值选择:

  如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

  假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

  p[class~="important"] {color: red;}

   

• 部分值属性选择器与点号类名记法的区别:   p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。

• 选择器	描述
  [attribute]	用于选取带有指定属性的元素。
  [attribute=value]	用于选取带有指定属性和值的元素。
  [attribute~=value]	用于选取属性值中包含指定词汇的元素。
  [attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
  [attribute^=value]	匹配属性值以指定值开头的每个元素。
  [attribute$=value]	匹配属性值以指定值结尾的每个元素。
  [attribute*=value]	匹配属性值中包含指定值的每个元素。

• 在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

• 伪类的语法：

  selector : pseudo-class {property: value}
  
  

  selector.class : pseudo-class {property: value}  //类与伪类搭配使用

  注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。

• 伪元素的语法：

  selector:pseudo-element {property:value;}

   

• CSS2 - :before 伪元素

  h1:before
    {
    content:url(logo.gif);
    }

   

• 使用 margin 属性来水平对齐.      注释：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。