css权威指南3---第二章选择器

1 选择器的类型：

   选择器分组：  h2,p {color:grey}

   通配选择器：* 该选择器可以和任何元素进行匹配，* {color：red}

   类选择器 和ID选择器：多类选择器： .class1 .class2{ background:black}  注意：区分大小写

   属性选择器：（1）简单属性选择 ：h1[class] {color:silver}

                                  --选择有class属性的所有h1元素  a[href][title]{......}

                                  --根据具体属性值选择 planet[moons='1']  p[class='urgent warning']{font-weight:bold;}

                                  --根据部分属性值选择   假设有多个类型 class=“class1 class2”    p[class~="class1"]{......}

                                  --子串匹配属性选择器： [foo^="bar"]--以bar开头  [foo$="bar"] -- 结尾  [foo*=bar"]--*所有

                                  --特定属性选择类型：*[lang|="en"]{color:white}  选择所有lang属性等于en或者以en-开头的元素

    后代选择器(选择出所有的后代)：在一个后代选择器中，规则左边的选择器一端包括两个或多个用空格分割的选择器。

                         --例子：ul ol ul em {color:gray;}   

                         --例子：td.sidebar {background:blue}

                                       td.main{ background:white;}

                                       td.sidebar a:link {color:white;}

                                       td.main a:link {color:blue;}

   选择子元素  >：对应于结构树上市选择一个元素的子元素而不是其后台元素

                       --例子：

h1 > strong {color:red;}

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

 选择相邻兄弟元素 +：选择一个元素紧跟着它后面的一个元素，并且这两个元素具有相同的父元素。注意：用一个结合符只能选择两个相邻兄弟中的第二个元素。   

html > body table +ul {margin-top:1.5em;}

伪类选择器：

   --静态伪类      “：link”:为访问过的链接   “：visited”：为已访问过的链接 

a:link {color:blue;}/*未访问的链接为蓝色*/
a:visited {color:red;}/*已访问的链接为红色*/

   --动态伪类     “：hover”：鼠标略过  “：active”：被激活的链接   “：focus”：可以接受键盘输入或者能以某种方式激活的元素

   --选择第一个子元素    “：first-child”       元素的首字母 “：first-letter”    首行：“：first-line”

   --设置之前和之后的元素   “：before”  “：after”