属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
.green{
color: green;
}
.blue{
color: blue;
}
/*属性选择器的使用*/
/*需求：获取所有拥有class属性的元素，将字体大小修改*/
/*E[attr]:获取拥有指定attr属性的E元素,当前的属性名称是严格匹配*/
/*li[class]{
font-size: 30px;
}*/
/*查找拥有指定属性和属性值的指定名称的元素*/
/*E[attr=value]:li[class=red]:说明我想查找拥有class属性并且属性值为Red的li元素*/
/*li[class=red]{
font-size: 30px;
}*/
/*查找拥有指定属性，并且属性值以指定字符开头的指定名称的元素*/
/*li[class^=red]:查找拥有class属性，并且属性值以red开头的li元素*/
/*li[class^=red]{
font-size: 30px;
}*/
li[class$=blue]{
font-size: 30px;
}
</style>
</head>
<body>
<ol>
<li class="red">河南再次发生矿难，死伤人数超过100</li>
<li class="redcolor">禽流感次发生蔓延，温家宝指示</li>
<li class="green">南方农作物减产绝收面积上亩</li>
<li class="darkblue">猪流感在广减产绝收发</li>
<li class="blue">全国多作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</body>
</html>
兄弟选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
/*下面这句样式的意思是：查找拥有.red样式的元素的兄弟p元素,只能查找下一个.查找只能往下查找*/
/*.red + p{
color: blue;
}*/
/*下面这句样式的意思是：查找拥有.red样式的元素的兄弟p元素，能查找到所有的兄弟元素.查找只能往下查找*/
.red ~ p{
color: blue;
}
</style>
</head>
<body>
<p>p1p1p1p1pp1</p>
<p class="red">p1p1p1p1pp1</p>
<span>能不能变色</span>
<p>p1p1p1p1pp1</p>
<p>p1p1p1p1pp1</p>
</body>
</html>
伪类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器 - 相对父元素的伪类</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
width: 700px;
height: 500px;
margin:0 auto;
margin-top:100px;
list-style: none;
border-left:1px solid #ccc;
border-top:1px solid #ccc;
}
ul > li{
float: left;
width:100px;
box-sizing: border-box;
height: 100px;
line-height:100px;
text-align: center;
background-color: #fff;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
/*获取第一个li元素，设置背景*/
/*first-child:查找第一个子元素。相对于它的父容器*/
/*li:first-child{
background-color: red;
}*/
/*查找第一个指定类型的子元素，相对于父容器*/
/*li:first-of-type{
background-color: red;
}*/
/*li:last-of-type{
background-color: yellow;
}*/
/*查找第5个Li元素*/
/*li:nth-child(5){
background-color: green;
}*/
/*li:nth-of-type(5){
background-color: green;
}*/
/* li:nth-of-type(odd){
background-color: red;
}
li:nth-of-type(even){
background-color: yellow;
}*/
/*n取值是从0到子元素的长度。如果<=0，则失效*/
/*li:nth-of-type(2n-1){
background-color: red;
}*/
/*获取前5个li元素*/
/*5-0 5-1 5-2 5-3 5-4 5-5
5 4 3 2 1*/
li:nth-of-type(-n + 5){
background-color: red;
}
li:nth-last-of-type(-n + 5){
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul>
</body>
</html>