CSS选择器

选择器类型：

css选择器主要有4种类型：标记选择器、类选择器、id选择器及伪类选择器等。

1.标记选择器

标记选择器（也称元素选择器）即直接使用HTML标记名称作为选择器。
元素（标记）名{ }，如：p { }

2.类选择器

在标记内使用class属性将其定义为类选择器。.class名{ }，可以给不同元素设置相同的class名，class名能重复使用。

3.id选择器

在标记内使用id属性将其定义为id选择器。#id名{ }，id名只能用于一个元素，不能重复使用。

4.伪类选择器

标记：伪类名{ }。

伪类名	说明
link	设置a标记在未被访问前的样式
hover	设置a标记在鼠标悬停时的样式
active	设置a标记在被用户激活（在鼠标单击与释放之间）时的样式
visited	设置a标记在被访问后的样式
focus	获取焦点
before	指定元素前
after	指定元素后
::selection	选择的元素
first-letter	作用于块，设置第一个字符的样式
first-line	作用于块，设置第一个行的样式表
first-child	设置第一个子标记的样式

超链接：a:hover必须置于a:link和a:visited之后才有效；a:active必须置于a:hover之后才有效。
::selection兼容大部分浏览器，但不支持火狐，要兼容火狐需用::-moz-selection
设置顺序如下：
a:link{····}
a:visited{····}
a:hover{····}
a:active{····}
before、after一般要与content一起使用，通过content向before、after添加一些内容。

补充：

通配选择器： 选中所有选择器。
语法： * {·····}
选择器分组（并集选择器）：可以同时选中多个选择器对应的元素。
语法：选择器1，选择器2，···，选择器N {······}
复合选择器（交集选择器）：选中同时满足多个选择器的元素。
语法：选择器1选择器2···选择器N {······}
PS: id选择器具有唯一标识元素的作用，一般不用复合选择器。
后代元素选择器：选中指定元素的指定的后代元素。
语法：祖先元素 后代元素{·····}
子元素选择器：选中指定父元素的指定子元素。
语法：

• 父元素 > 子元素 {······}
• :first-child 选取第一个子标签
• :last-child 选取最后一个子标签
• :nth-child(number) 选取指定位置的子元素
  number: even表示偶数位置、odd表示奇数位置
• 指定类型的子元素（某个元素的子元素）：
• :first-of-type 选取第一个子标签
• :last-of-type 选取最后一个子标签
• :nth-of-type(number) 选取指定位置的子元素

IE6及以下的浏览器不支持子元素选择器。

元素之间的关系：

• 父元素：直接包含子元素的元素；
• 子元素：直接被父元素包含的元素；
• 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素；
• 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素；
• 兄弟元素：拥有相同父元素的元素。

属性选择器：根据元素中的属性或属性值来选中指定元素。
语法：
标签名[属性名] 用法： 选取含有指定属性的元素

span[class] {
    		background-color:red;
    	}
    -----------------------------------
     <span class="aaa">我是span</span>
     <p>我是p</p>
     <p>我是p</p>
     <p>我是p</p>
     <p>我是p</p>

标签名[属性名=“属性值”] 用法： 选取含有指定属性值的元素

span[class="aaa"] {
		background-color:red;
	}
-----------------------------------
 <span class="aaa">我是span</span>
 <p>我是p</p>
 <p>我是p</p>
 <p>我是p</p>
 <p>我是p</p>

标签名[属性名^=“属性值”] 用法： 选取属性值以指定内容为开头的元素

p[class^="a"] {
		background-color:red;
	}
--------------------------------------
  <span class="aaa">我是span</span>
  <p class="abc">我是p</p>
  <p class="ab">我是p</p>
  <p class="cd">我是p</p>
  <p class="bd">我是p</p>

标签名[属性名$=“属性值”] 用法： 选取属性值以指定内容为结尾的元素

p[class$="d"] {
		background-color:red;
	}
--------------------------------------------
  <span class="aaa">我是span</span>
  <p class="abc">我是p</p>
  <p class="ab">我是p</p>
  <p class="cd">我是p</p>
  <p class="bd">我是p</p>

标签名[属性名*=“属性值”] 用法： 选取属性值含有指定内容的元素

p[class*="c"] {
		background-color:red;
	}
-------------------------------------
  <span class="aaa">我是span</span>
  <p class="abc">我是p</p>
  <p class="ab">我是p</p>
  <p class="cd">我是p</p>
  <p class="bd">我是p</p>

兄弟元素选择器：

• 选中一个元素后紧挨着的一个指定的兄弟元素。 语法：元素1 + 元素2

span + p {
		background-color:red;
}
----------------------------------
<span>我是span</span>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>

效果如下：

• 选中元素后面所有的兄弟元素。语法：元素1 ~ 元素

span ~ p {
   	background-color:red;
}
----------------------------------
<span>我是span</span>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>

效果如下：

否定伪类选择器：从以选中的一个元素中剔除某些元素。
语法：:not(选择器名){····}

div:not{.box}