HTML5学习_day13(1)--css3基础属性

css3选择器

css2选择器

1.标签选择器

2.id选择器

3.class选择器

4.群组选择器

5.后代选择器

6.伪类选择器(first-child等)

7.通配选择器

css3选择器:

1.子选择器 例如:div>p

2.相邻兄弟选择器 div+p(只能选择到div下方第一个p 若div下方第一个不是p元素 就没改变 且div自身的样式不改变)

3.属性选择器 例如 div[属性]{}

<div width="123"></div>

<style type="text/css">

div[width]{

height: ;

background: ;

}

</style>

4.属性值选择器 例如：div[class="123"]{}

<div class="div0"></div>

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

<style type="text/css">

div[class="div0"]{值一定要完全匹配

这里的样式就是div0的样式

}

</style>

5.同级通用选择器 div~p{} 选择的是与div同级的所有p标签

6.伪类选择器

:before

:after

:nth-child(2)

:first-chile 在父级里面同级第一个标签被选中，如果最末尾元素不是选择器的标签时。就无法选中如(p:first-chile  第一个不是p标签  就无法选中)

:last-child  在父级里面同级最末尾的一个标签被选中，如果最末尾元素不是选择器的标签时。就无法选中如(p:last-chile  最后一个不是p标签  就无法选中)

:first-of-type 这个就是父级里面所有标签的第一个 如(p:first-of-type 就是该包含块中所有p标签中的第一个p标签)

:last-of-type 这个就是父级里面所有标签的最后一个 如(p:last-of-type 就是该包含块中所有p标签中的最后一个p标签)

:only-child 这个是父级里面只有一个标签才能选中如(p:onli-child p所在的包含块里面只有p这个唯一一个标签才能选中)

:only-of-type 这个是父级里面可以有多个标签 但选择器的标签种类只有一个如(p:only-of-type p标签只能在包含块中出现一次)

<span style="white-space:pre">		</span><div>
			<p>第一个元素</p>
			<h1>第二个子元素</h1>
			<span>第三个子元素</span>
			<span>第四个子元素</span>
			<p>第五个子元素</p>
		</div>		
		<style type="text/css">
			p:first-child{
				color: red; 
			}
			p:last-child{
				color: blue;
			}
		</style>