定义选择器

选择器的构造

选择器决定样式规则应用于哪些元素。

选择器可以分为以下几种类型：

   1、按名称选择元素（需要添加样式的元素名称，也称元素选择器）

 h1{color:red;}

  2、按类或id选择元素（类选择器，ID选择器）

      .architect{color:red;}/*按类名来选择*/
       #gaudi{color:red;}/*按ID名来选择*/

  3、按上下文选择元素（选择在architect类的所有后代p元素，也称后代选择器）    

   .architect p{color:red;}

   4、按父元素选择要格式化的元素（子选择器）
       

 .architect > p{color:red;}/*选择类名为architect元素的子元素中的p元素*/

 5、按相邻同胞元素选择要格式化的元素
      

 .architect p+p{color:red;} /*只选择跟在同胞p后面的元素*/
    /*可以应用于第一个p元素不添加样式，其余的相邻同胞p元素添加样式*/

  6、普通同胞元素：
        

h1~h2{color:red;}/*不需要相邻，只需在同一父元素下的同胞元素*/

  7、选择第一个或最后一个元素(伪类)

        li:first-child{color:red;}
        li:last-child{color:red;}

8、选择元素的第一个字母或第一行(伪元素CSS3需要::)

        p::first-letter{color:red; font-size:1.4em; font-weight}
        p::first-line{color:red;}

9、按属性选择元素

  p[class] {color:red;}（匹配指定的属性）
  p[class="value"] {} （属性值完全匹配）
  p[class~="value"] {} (属性值是以空格隔开，其中有一个与value完全匹配)
  p[class^="value"] {} (属性值是以value开头，value为完整单词或单词的一部分)
  p[class|="value"] {} (属性值以value-开头)
  p[class$="value"] {} (以value结尾，value为完整单词或单词的一部分)
  p[class*="value"] {} (属性值包含指定值的子字符串)

 10、指定元素组

  h1,h2{}

11、组合使用选择器

  .project h2[lang|="es"] + p em{}
    /*仅选择em元素，它包含在p元素中，这样的p元素是以lang属性值为es开头的h2元素的直接相邻同胞元素，且是类名为project的后代元素*/

12、按链接状态选择元素

/*link设置从未被激活的链接*/
a:link{
    color:red;
}
/*visited设置访问者已激活的链接*/
a:visited{
    color:orange;
}
/*focus设置通过键盘选择并已准备好激活*/
a:focus{
    color:purple;
}
/*houver设置光标指向链接时，链接的外观*/
a:hover{
    color:green;
}
/*active设置激活的链接外观*/
a:active{
    color:blue;
}

13、通配符选择器

*{

    font-size: 14px;
    margin: 0;
    padding: 0;
}
/*选择页面中所有元素，一般用于清除所有元素的内外边距*/