CSS学习（一）

一、CSS语法

CSS 规则集由选择器和声明块组成，例如：

p{
	margin:0;
	padding:0;
}

p为选择器，它指定了要设置样式HTML元素<p>
margin和padding为属性名称，0为属性值。每条属性用" ; "分隔。

二、CSS选择器

1、id选择器
id选择器，同一个HTML文档中一般只会使用一次。

<div id="div">div</div>
<div id="div1">div1</div>

#div{
	color:red;
}

选择id="div"的元素

2、 类选择器
class选择器，同一个HTML文档中可以使用多次

<div class="div">div1</div>
<div class="div">div2</div>

.div{
	color:red;
}

选择所有class="div"的元素

3、元素选择器

<div>div1</div>
<div>div2</div>
<p>p</p>

div{
	color:red;
}

选择所有的div元素

4、后代选择器

<div class="div1">
	<div class="div2">
		<p>div2下的标签</p>
	</div>
	<p>div1下的标签</p>
</div>

.div1 p {
	color: red;
}

选择class="div1"下的所有class="div2"的元素

5、子元素选择器

<div class="div1">
	<div class="div2">
		<p>div2下的标签</p>
	</div>
	<p>div1下的标签</p>
</div>

.div1 > p {
	color: red;
}

选择class="div1"下的父级为div1的p元素

6、伪类选择器

<div>
	<h2>第1个h2</h2>
	<h2>第2个h2</h2>
	<p>第1个p</p>
	<p>第2个p</p>
	<div>第1个div</div>
	<div>第2个div</div>
</div>

p:first-child {
	color: red;
}

p:first-of-type {
	color: red;
}

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。