CSS3笔记（一）----新增选择器

一、基本选择器

1.* 通配符

通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素

*{
  margin：0；
  padding：0；
}

---

2.类选择器（.className）

1、使用类选择器之前需要在html元素上定义类名

<li class="box content">2</li>
.content {font-weight: bold; color: yellow;}

---

2、类选择器还可以结合元素选择器来使

代表类是on的p元素  （注意哦！这个没有空格，有空格的是包含关系）

p.box{color: red;}

---

3、多类选择器(多类选择器不被IE6支持)

.box.content {background:#ccc;}

---

4.子元素选择器(E>F)

子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素

ul > li {background: green;color: yellow;}

---

5.相邻兄弟元素选择器(E + F)

EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，相邻,一对一，出现效果的是F,E只是为参照物

.box + li {background: green;color: yellow; border: 1px solid #ccc;}

上述效果中，.box为参照物，起效果的是li

---

6.通用兄弟选择器（Ｅ 〜 Ｆ）

E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择

所有Ｅ元素后面的Ｆ元素。一对多，出现效果的是E后面的所有F兄弟选择器

.box ~ li {background: green;color: yellow; border: 1px solid #ccc;}

---

7.群组选择器（1,2,...,N）

将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开

.first, .last {background: green;color: yellow; border: 1px solid #ccc;}

---

二、属性选择器

1、E[attr="value"]

栗子1：         

a[href] {
			color: #00FFFF;
		}

 有href属性的a标签

栗子2：

input[type="text"],
input[type="password"]{
							background-color: #00FFFF;
						}

 type类型为text和password的input标签

E是标签，attr是属性，value是属性值

---

三、伪类选择器

1、动态伪类

a:link   a:visited   a:hover   a:active

遵循爱（LoVe）恨（HAte）

:hover用于当用户把鼠标移动到元素上面时的效果；

:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）

:focus用于元素成为焦点，这个经常用在表单元素上。

因为前面说过了前四个，这里着重说一下 第五个聚焦

1.E:focus   获取焦点时的样式

.box:focus{	border:1px solid #f33;	}

---

2、UI元素状态伪类

1.E:enabled              可用状态

2.E :disabled             不可用状态

3.E :checked              选中状态

常用于form表单中

---

3.CSS3的:nth选择器

1、:first-child

2、:last-child

3、:nth-child(n)     数字、even偶数、odd奇数

4、:nth-last-child(n)

5、:only-child

:nth-child(n)，其中n是一个简单的表达式，那么"n"取值从“1”开始计算,不能取负值

5、:nth-of-type()                 :nth-child()

6、:nth-last-of-type()            :nth-last-child()

7、:first-of-type和:last-of-type      :first-child  :last-child

8、:only-of-type                 :only-child

9、:empty     p:empty {display: none;}

选择器固然多，但是选择适用的就好

:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:not(selector)	:not(p)	选择非 <p> 元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。