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>