HTML5+CSS3学习笔记（1） --- 属性选择器

一.属性选择器：
属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素。
1.E[attr]：查找指定的拥有attr属性的E标签。如查找拥有style属性的li标签。
例子：
li[style]{
要给拥有style属性的li标签设置的css样式。
}；
2.E[attr=value]：查找拥有指定的Attr属性并且属性值为value的E标签。如想要查找拥有class属性并且值为Red的li标签====严格匹配。
例子：
li[style=red]{
要给拥有style属性的li标签设置的css样式。
}；
3.E[attr*=value]：查找拥有指定的Attr属性并且属性值中包含（可以在任何位置）value的E标签。
例子：
li[style*=red]{
要给拥有style属性的li标签设置的css样式。
}；
4.E[attr^=value]：查找拥有指定的attr属性并且属性值以value值开头的E标签。
例子：
li[style^=red]{
要给拥有style属性的li标签设置的css样式。
}；
5E[Sttr$=value]：查找拥有指定的attr属性并且属性值以value结束的E标签。
例子：
li[style￥=red]{
要给拥有style属性的li标签设置的css样式。
}；

二.兄弟选择器： +，~


上面是相关HTML代码用作下面的例子

+：获取当前元素的相邻的满足条件的元素
下面这句样式说明查找 ：添加了.first样式的标签的相邻的span元素。
使用条件：
1.相邻
2.必须是指定类型的元素
例如：
.first+span{
font-size: 30px;
}
提醒：
如果上面代码写成下面这样将不会有效果，必须遵守两个相关条件，缺一不可。
.first+li{
font-size: 30px;
}；

~的使用
/*下面样式查找添加了.first样式的元素的所有兄弟li元素。
使用条件：
1.必须是指定类型的元素
.first~li{
color: red;
}；

三.伪类选择器
1.相对父元素的伪类
E:first-child:查找E元素的父级元素中的第一个E元素。在查找的时候并不会限制查找的元素的类型
例子：
//查找li的父元素中的第一个li元素
使用条件：
1.相当于当前指定元素的父元素
2.查找的类型必须时指定的类型
li:first-child {
color: red;
}；
E:last-child:查找E元素的父元素中最后一个指定类型的子元素
查找li的父元素中的最后一个li元素
li:last-child {
color: blue;
}；
//上面的两种方法在实际中并不实用，查找时没有限制类型，又是也需要自己创建标签，如果子元素中有新标签加入，查找的标签就可能会没有效果。可以用以下两种代替上面两种。

/查找的时候限制类型 first-of-type或者last-of-type/
/1.也是相对于父元素
2.在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素/
li:first-of-type {
color: blue;
}

li:last-of-type {
color: red;
}

/指定索引位置 nth-child(从1开始的索引||关键字||表达式)/
li:nth-child(n) {
background-color: lightblue;
}
提醒：n:默认取值范围为0~子元素的长度.但是当n<=0时，选取无效。

如有大佬发现文中错误，请各位大佬尽情指出，感谢。写这个博客是想提醒自己每天多学习多进步一点。