高级css选择器的分类

一、属性选择器

属性选择器可以根据标签内的属性定位某个元素。比如 input 标签的 type、value都是属性，a标签的 href、target、class也是属性、img标签的src、alt、title等。

css

input[type="text"]{color:#ff0000;}

类似jq的 $("input[type='text']").css("color","#ff0000");

然后再跟大家介绍一下有几种比较方法

1·[att=value]

比如 [class="aa"]，查找class的值是aa的元素。

2·[att ~=value]

比如[class="aa bb cc"]，查找class 是 aa、bb、cc的元素，值中间用空格隔开。

3·[att|=value]

比如[class|="aa"]，查找class的值是 aa-xx元素，值是aa后面必须带个“-”， xx代表任意字符。

4·[att^=value]

比如[class^="a"]，查找class的值以a开头的元素。

5·[att$=value]

比如[class$="a"]，查找class的值只要包含a的元素，无论位置在哪里。

6·[att*=value]

比如[class*="a"]，查找class的值以a结束的元素。

二、子选择器

子选择器用符号 “>” 表示，他表示查找此元素的第一代子元素，而不是css的继承。比如下面的这段html代码

<div>
<p id="p1" >
我是div的儿子
<p id="p2">我是p的儿子</p>
</p>
</div>

Css

div > p{background:#f00;}

上面这段css 只能改变 id="p1" 的style。

类似jq的 $("div > p").css("color","#ff0000");

三、动态伪类

动态伪类就是，当用户与网站产生交互操作的时候才发生的。比如 active、hover、focus。

active是鼠标按下的时候

hover是鼠标经过的时候

focus是控件获取焦点的时候

<input type="text" />

Css

input:active{background:#f00;}
input:hover{background:#ff0;}
input:focus{background:#0ff;}

四.ID选择器

元素的ID名称是唯一的，只能对应于文档中一个具体的元素。在HTML中，用来构建整体框架的标签应该定义ID属性，因为这此对象一般在页面中都是比较唯一的，固定的，不会重复，如Logo包含框，导航条，主体包含框，版权区域等。如：#myDiv{}