Flex布局以及CSS选择器

一、Flex布局

　　http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

二、CSS选择器

1、CSS 元素选择器

　　最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

 

2、CSS 选择器分组

　　通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

 

3、CSS 类选择器

　　类选择器允许以一种独立于文档元素的方式来指定样式。

 <h1 class="important">
  This heading is very important.
 </h1>


 .important {color:red;}
或者 * .important {color:red;}

 

4、CSS ID选择器

　　ID 选择器允许以一种独立于文档元素的方式来指定样式。

<p id="intro">This is a paragraph of introduction.</p>

#intro {font-weight:bold;}
或者 *#intro {font-weight:bold;}

 

5、CSS 属性选择器

　　CSS 2 引入了属性选择器。

　　属性选择器可以根据元素的属性及属性值来选择元素。

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

planet[moons] {color:red;}

 

6、CSS 后代选择器

　　后代选择器（descendant selector）又称为包含选择器。

　　后代选择器可以选择作为某元素后代的元素。

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

h1 em {color:red;}

 

7、CSS 子元素选择器

　　与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>


h1 > strong {color:red;}

 

8、CSS 相邻兄弟选择器

　　相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

li + li {font-weight:bold;}

 

9、伪类

　　CSS 伪类用于向某些选择器添加特殊的效果。

1）语法

伪类的语法：
selector : pseudo-class {property: value}


CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}

2）锚伪类

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

 

10、伪元素

　　CSS 伪元素用于向某些选择器设置特殊效果。

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }