html5中常见选择器

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

html5有以下常见的选择器：

基本选择器：

1.  元素选择器

* 格式：标记名{/* 声明块* /}
* 所有与该标记名匹配的元素，都将应用声明块中的规则

 2.   类选择器

* 格式：**.**类名{/* 声明块 */}
* 所有class属性为指定类名的元素，都将应用声明块中的规则，其中类型名可以写多个，方便代码复用
* 所有标签都可有class属性

　　 3.  id选择器

* 格式：#id值{/* 声明块 */}
* < h1 id="属性值">
* 属性id为指定值的元素，都将应用声明块中的规则
* 在同一个HTML文档中，元素的id值必须唯一
* 现阶段不写id选择器，JS使用

4.通配符选择器

　　格式: *+{声明块}
　　例子: *{ color:red;}

　 5.并集选择器/组合选择器

　　格式: 元素或类或id+","+元素或类或id+","+元素或类或id","+{声明块}　　　　
　　例子: h1,.cc,h3{ color:red;}

---

层次选择器:

• 子集选择器

  格式:父级元素名称+">"+子级元素名称+{声明块}
  
  例子: div>p{color:red;}
  

• 后代选择器

  格式:祖先元素名称+空格+后代元素名称+{声明块}
  
  例子: div p{color:red;}
  

• 兄弟选择器

  格式: A元素名称+"+"+B元素名称+{声明块}
  
  例子: div+P{color:red;}
  
  注:选择A元素后紧邻的B元素,AB之间不许有其他元素.
  

• 通用选择器

  格式:同级元素A+"~"+同级元素B+{声明块}
  
  例子: div~p{color:red;
  
  注:表示选择与A元素同级别的所有B元素(B的位置是在A后面)
  

---

伪类选择器

　　动态伪类选择器

1.未访问

    a:link{color:black;}

2.鼠标悬停

    a:hover{color:pink;}

3.鼠标点击时

    a:active{color:green;}

4.点击后

    a:visited{color:五颜六色;}

注:hover是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上

• a:focus{color:五光十色;} 多用于输入框或链接

注:IE7以前不支持:focus，IE6以前不支持:hover :active

• 上5个伪类选择器的顺序要求:（love hate）

  A: link,visited,focus,hover,active

  B: visited,link,focus,hover,active

结构伪类选择器

格式:元素名称+":nth-child(n)"+{声明块}

• 例子: section:nth-child(2){color:deeppink;}

  表示选中html里的第二个section元素,文字设置为deeppink
  

• 选中第一个

  格式:元素名称+":first-child"+{声明块}
  例子: p:first-child{color:red;}
  

• 选中最后一个

  格式:元素名称+":last-child"+{声明块}
  例子: p:last-child{color:red;}
  

• 选中奇数项

  格式:元素名称+":nth-child(odd)"+{声明块}
  例子:section:nth-child(odd){color:deeppink;}
  

• 选中偶数项

  格式:元素名称+":nth-child(even)"+{声明块}
  例子:section:nth-child(even){color:deeppink;}
  

  注意：n从0开始取整数，直到最大值。例选中前3个：-n+3

---

伪元素选择器

• 元素后面加内容

  格式:元素名称+":after"+{content:"要添加的内容";}
  例子:  i:after
      {content:"姓名";}
  

 　*元素前面加内容

    格式:元素名称+":before"+{content:"要添加的内容";}
    例子:  i:before
        {content:"姓名";}

• 元素第一行添加样式

  格式:元素名称+":first-line"+{声明块}
  例子: p:first-line{color:red;}
  

• 元素第一个字母或第一个汉字

  格式:元素名称+":first-letter"+{声明块}
  例子: p:first-letter{color:red;}
  

  注:为了解决兼容性(有的浏览器不识别),伪元素选择器,建议打两个冒号