常用选择器：

  1. 类型选择器：使用元素名称来进行选择 
    1 p{color:black;}
2 a{text-decoration:underline}
3 h1{font-weight:bold;}
  2. 后代选择器：寻找特定元素或元素组的后代。后代选择器由其他两个选择器及之间的空格表示。 
    1 li a {text-decoration:none;}

    这两种选择器适合于那些应用范围广的一般性样式，要寻找更特定的元素，可以使用ID选择器和类选择器。

    1 #font-weight:bold;}
2 .datePosted{color:green;}
3 
4 <p id="intro">Some text</p>
5 <p class="datePosted">24/3/2017</p>

    通常会使用类型、后代、ID、类等几种选择器的组合。

伪类：

1 a:link{color:#0f8;}
2 a:visited{color:#0k6;}
3 a:hover{color:#0j0;}
4 a:active{background-color:#C30;}
5 input:focus{background-color:#F33}

 通用选择器：

*{
padding:0;
margin:0;
}

高级选择器：

    1. 子选择器：选择元素的直接后代
 1 #nav > li {background-color:#060}
 2 
 3 <ul id="nav">
 4 <li>Home</li>
 5 <li>Service<ul>
 6 <li>Design</li>
 7 <li>Development</li>
 8 <li>Consultancy</li>
 9 </ul></li>
10 <li>Contact Us</li>
11 </ul>

             2.后代选择器：选择一个元素的所有后代

1 #nav  li {background-color:#060}

            3.相邻同胞选择器：选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻同胞选择器。

#增加紧邻来好元素后出现的段落的上边距
 h1 + p {margin-top:50px;}

           4.属性选择器:根据某个属性是否存在或属性的值来寻找元素。

1     abbr[title]{
2         border-bottom:1px dotted #999;}
3     abbr[title]:hover{
4         cursor:help;}
5        <abbr title="Cascading style sheets">CSS</abbr>

                          除了根据属性是否存在之外，还可以根据属性值应用样式。

          5.在样式表中使用特殊性

1 #假设希望站点上大多数表单的宽度是30em,但是搜索表单的宽度只有15em
2 form{width:30em;}
3 form#search{width:15em;}