CSS选择器（全）

元素选择器

作用：根据标签名来选中指定的元素

语法： 标签名{ }

例子：p{ } h1{ } div{ }

---

id选择器

作用：根据元素的id属性值选中一个元素

语法：# id属性值{ }

例子：

#box{ 
}		

#abc{ 
}

---

类选择器（class选择器）

作用：根据元素的class属性值选中一组元素

语法：. class属性值{ }

例子：

.box{ 
}	
	
.abc{ 
}

注：class是一个标签的属性，它和id类似，不同的是class可以重发使用，可以通过class属性来为元素分组

可以同时为一个元素指定多个class属性，之间用空格相隔开。

例如：

<h1 class="aaa bbb">我有两个class属性</h1>

---

通配选择器

作用：选中页面中的所有元素

语法：*{ }

例子：

*{
	color:red;
}

---

复合选择器（交集选择器）

作用：选中同时复合多个条件的元素

语法：选择器1选择器2选择器3选择器n{ }

例子：

div.red{
	font-size:30px;
}

.a.b.c{
	color:blue
}

注：交集选择器中如果有元素选择器，必须使用元素选择器开头

---

选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器3，选择器n{ }

例子：

h1,span{
	color:green
}

---

关系选择器

父元素： 直接包含子元素的元素叫父元素

子元素： 直接被父元素包含的元素是子元素

祖先元素： 直接或间接包含后代元素的元素叫祖先元素；一个元素的父元素也是它的祖先元素

后代元素： 直接或间接被祖先元素包含的元素叫后代元素；子元素也是后代元素

兄弟元素： 拥有相同父元素的元素是兄弟元素

子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素 > 子元素

例子：

div.box > span{
	color:orange;
}

后代元素选择器

作用：选中指定元素内的指定后代元素

语法：祖先 后代（中间为空格）

例子：

div span{
	color:skyblue;
}

兄弟元素选择器

作用：
a）选择下一个兄弟
b）选择下边所有的兄弟

语法：
a）前一个 + 下一个
b）兄 ~ 弟

例子：

p + span{
	color:red;
}
p ~ span{
	color:red;
}

---

属性选择器

[属性名] 选择含有指定属性的元素
[属性名 = 属性值] 选择含有指定属性和属性值的元素
[属性名 ^= 属性值] 选择属性值以指定值开头的元素
[属性名 $= 属性值] 选择属性值以指定值结尾的元素
[属性名 *= 属性值] 选择属性值中含有某值的元素

例子：

// [属性名] 选择含有指定属性的所有元素
[title]{
	color:orange;
}

// [属性名] 选择含有指定属性的元素
p[title]{
	color:orange;
}

// [属性名 = 属性值] 选择含有指定属性和属性值的元素
p[title=abc]{
	color:orange;
}

// [属性名 ^= 属性值] 选择属性值以指定值开头的元素
p[title^=abc]{
	color:orange;
}

// [属性名 $= 属性值] 选择属性值以指定值结尾的元素
p[title$=abc]{
	color:orange;
}

// [属性名 *= 属性值] 选择属性值中含有某值的元素
p[title*=abc]{
	color:orange;
}

---

伪类选择器

伪类（不存在的类，特殊的类）

a）伪类用来描述一个元素的特殊状态，比如，第一个子元素、被点击的元素、鼠标移入的元素…

b）伪类一般情况下都是使用 : 开头

例如：

 :first-child 			 //   第一个子元素 
 :last-child  			//  最后一个子元素 
 :nth-child( )		   //选中第 n 个子元素

以上这些伪类都是根据所有的子元素进行排序

 :first-of-type
 :last-of-type
 :nth-of-type()

这几个伪类的功能和上述的类似，不同的是他们是在同类型元素中进行排序

特殊值：
n 表示：第n个 n的范围0到正无穷
2n 或 even 表示 ：选中偶位数的元素
2n+1 或 odd 表示：选中奇位数的元素

:not( ) 否定伪类		//将符合条件的元素从选择器中去除