freeCodeCamp 练习4 -- 选择器 -- building a balance sheet

1. html <caption>元素展示一个表格的标题，它常常作为 <table>的第一个子元素出现，同时显示在表格内容的最前面。

2. CSS 属性选择器
   1） 选择[attribute]器用于选择具有指定属性的元素。
   2） 选择[attribute="value"]器用于选择具有指定属性和值的元素。
   3） 选择[attribute~="value"]器用于选择属性值包含指定单词的元素。

   	[title~="flower"] {
   	  border: 5px solid yellow;
   	}
   	示例将匹配 title="flower"、title="summer flower" 和 title="flower new" 的元素，
   	但不匹配 title="my-flower" 或 title="flowers" 的元素。
   

   4） 选择[attribute|="value"]器用于选择具有指定属性的元素，其值可以正好是指定值，也可以是指定值后跟一个连字符（-）。
   该值必须是一个完整的单词，可以是单独的，如 class=“top”，也可以后跟一个连字符 (-)，如 class=“top-text”。
   5） 选择[attribute^="value"]器用于选择具有指定属性的元素，其值以指定值开头。该值不必是一个完整的单词。

   	以下示例选择具有以“top”开头的 class 属性值的所有元素：
   	[class^="top"] {
   	  background: yellow;
   	}
   

   6）选择[attribute$="value"]器用于选择属性值以指定值结尾的元素。该值不必是一个完整的单词。
   7）选择[attribute*="value"]器用于选择属性值包含指定值的元素。该值不必是一个完整的单词。

3. css diplay: flex 布局教程 阮一峰

4. css ! important：在CSS中，通过对某一样式声明 !important，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级