html5中常见选择器

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

html5有以下常见的选择器：

基本选择器：

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

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是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上

注: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;}