属性选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .red{ 8 color: red; 9 } 10 .green{ 11 color: green; 12 } 13 .blue{ 14 color: blue; 15 } 16 17 /*属性选择器的使用*/ 18 /*需求：获取所有拥有class属性的元素，将字体大小修改*/ 19 /*E[attr]:获取拥有指定attr属性的E元素,当前的属性名称是严格匹配*/ 20 /*li[class]{ 21 font-size: 30px; 22 }*/ 23 /*查找拥有指定属性和属性值的指定名称的元素*/ 24 /*E[attr=value]:li[class=red]:说明我想查找拥有class属性并且属性值为Red的li元素*/ 25 /*li[class=red]{ 26 font-size: 30px; 27 }*/ 28 /*查找拥有指定属性，并且属性值以指定字符开头的指定名称的元素*/ 29 /*li[class^=red]:查找拥有class属性，并且属性值以red开头的li元素*/ 30 /*li[class^=red]{ 31 font-size: 30px; 32 }*/ 33 li[class$=blue]{ 34 font-size: 30px; 35 } 36 </style> 37 </head> 38 <body> 39 <ol> 40 <li class="red">河南再次发生矿难，死伤人数超过100</li> 41 <li class="redcolor">禽流感次发生蔓延，温家宝指示</li> 42 <li class="green">南方农作物减产绝收面积上亩</li> 43 <li class="darkblue">猪流感在广减产绝收发</li> 44 <li class="blue">全国多作物减产绝收面积上亩</li> 45 <li>猪流感在广东群体性暴发</li> 46 </ol> 47 </body> 48 </html>
兄弟选择器：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .red{ 8 color: red; 9 } 10 /*下面这句样式的意思是：查找拥有.red样式的元素的兄弟p元素,只能查找下一个.查找只能往下查找*/ 11 /*.red + p{ 12 color: blue; 13 }*/ 14 /*下面这句样式的意思是：查找拥有.red样式的元素的兄弟p元素，能查找到所有的兄弟元素.查找只能往下查找*/ 15 .red ~ p{ 16 color: blue; 17 } 18 </style> 19 </head> 20 <body> 21 <p>p1p1p1p1pp1</p> 22 <p class="red">p1p1p1p1pp1</p> 23 <span>能不能变色</span> 24 <p>p1p1p1p1pp1</p> 25 <p>p1p1p1p1pp1</p> 26 </body> 27 </html>
伪类选择器：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选择器 - 相对父元素的伪类</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 ul{ 12 width: 700px; 13 height: 500px; 14 margin:0 auto; 15 margin-top:100px; 16 list-style: none; 17 border-left:1px solid #ccc; 18 border-top:1px solid #ccc; 19 } 20 ul > li{ 21 float: left; 22 width:100px; 23 box-sizing: border-box; 24 height: 100px; 25 line-height:100px; 26 text-align: center; 27 background-color: #fff; 28 border-right:1px solid #ccc; 29 border-bottom:1px solid #ccc; 30 } 31 /*获取第一个li元素，设置背景*/ 32 /*first-child:查找第一个子元素。相对于它的父容器*/ 33 /*li:first-child{ 34 background-color: red; 35 }*/ 36 /*查找第一个指定类型的子元素，相对于父容器*/ 37 /*li:first-of-type{ 38 background-color: red; 39 }*/ 40 /*li:last-of-type{ 41 background-color: yellow; 42 }*/ 43 44 /*查找第5个Li元素*/ 45 /*li:nth-child(5){ 46 background-color: green; 47 }*/ 48 /*li:nth-of-type(5){ 49 background-color: green; 50 }*/ 51 52 /* li:nth-of-type(odd){ 53 background-color: red; 54 } 55 li:nth-of-type(even){ 56 background-color: yellow; 57 }*/ 58 59 /*n取值是从0到子元素的长度。如果<=0，则失效*/ 60 /*li:nth-of-type(2n-1){ 61 background-color: red; 62 }*/ 63 64 /*获取前5个li元素*/ 65 /*5-0 5-1 5-2 5-3 5-4 5-5 66 5 4 3 2 1*/ 67 li:nth-of-type(-n + 5){ 68 background-color: red; 69 } 70 li:nth-last-of-type(-n + 5){ 71 background-color: yellow; 72 } 73 </style> 74 </head> 75 <body> 76 <ul> 77 <li>1</li> 78 <li>2</li> 79 <li>3</li> 80 <li>4</li> 81 <li>5</li> 82 <li>6</li> 83 <li>7</li> 84 <li>8</li> 85 <li>9</li> 86 <li>10</li> 87 <li>11</li> 88 <li>12</li> 89 <li>13</li> 90 <li>14</li> 91 <li>15</li> 92 <li>16</li> 93 <li>17</li> 94 <li>18</li> 95 <li>19</li> 96 <li>20</li> 97 <li>21</li> 98 <li>22</li> 99 <li>23</li> 100 <li>24</li> 101 <li>25</li> 102 <li>26</li> 103 <li>27</li> 104 <li>28</li> 105 <li>29</li> 106 <li>30</li> 107 <li>31</li> 108 <li>32</li> 109 <li>33</li> 110 <li>34</li> 111 <li>35</li> 112 </ul> 113 </body> 114 </html>