简单理解css之选择器

下文中attribute代表属性，value代表值，tag代表标签

ID选择器

#id{
	attribute: value;
}

ID选择器+派生选择器

id为"exp"中的p标签的字体颜色为红色．

#exp p{
	color: red;
}

---

类选择器

.header{
	attribute: value;
}

类选择器+派生

类名为"header"的p标签颜色为红色

.header p{
	color: red;
}

---

标签p并且类名为header的字体颜色为红色

这种方法同样适用于ID选择器

p.header{
	color: red;
}

属性选择器

[atrribute]{
	attribute: value;
}

属性和值选择器

表格中border-collapse属性为collapse的字体大小为20px

[border-collapse=collapse]{
	font-size: 20px;
}

还有其他的使用方法，具体事例就不一一列举

选择器	描述
[attribute~=value]	用于选取属性值中包含"value"字样的元素
[attribute|=value]	用于选取带有"value"以开头的属性值的元素，该值必须是整个单词。(连字符连接的前后两个单词算作两个单词)
[attribute^=value]	匹配属性值以"value"开头的每个元素。
[attribute$=value]	匹配属性值以"value"结尾的每个元素。
[attribute*=value]	匹配属性值中包含"value"的每个元素。

派生选择器

后代选择器

/* 选择div元素中所有p元素的颜色 */
div p{
	color: blue;
}

子元素选择器

/* 类似于后代选择器，不过这个只会选择自己的子代元素 */
h1 > strong {
	color: red;
}

相邻兄弟元素

/* 选择紧跟在h1元素后的p元素
   h1和p有相同的父元素		*/
h1 + p {
	margin-top:50px;
}

伪类

锚伪类

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

first-child伪类

首先p:first-child指的： 选取作为任意元素的第一个子元素的p元素．切忌当作ｐ元素的第一个子元素

/*  选取作为p元素的第一个子元素的i元素 */
p>i : first-child{
	attribute: value;
}

#### first-child的扩展

如果要选取奇数行偶数行的话
```css
table tr:nth-child(2n+1){
	backdroud-color: gray;
}

这样就可以实现下图效果

伪元素

Obj:first-line	选取Obj的第一行
Obj:first-letter	选取Obj第一个字母
Obj:before	在Obj前添加一个元素，只体现，不存在
:after	在Obj之前添加一个元素，只体现，不存在