多類選擇器
效果圖：
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .p1{ color: red; } .p2{ font-size:25px; } .p1.p2{ font-style: italic; } </style> </head> <body> <p class="p1">jingchenyong</p> <p class="p2">jingchenyong</p> <p class="p1 p2">jingchenyong</p> </body> </html>
屬性選擇器
1、簡單屬性選擇：
例如：[title]{}
2、根據具體屬性值選擇：
除了選擇擁有某些的元素，還可以進一步縮小選擇範圍，只選擇有特定屬性值得元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> [title]{ background-color: #29ff19; } [title="jing1"]{ background-color: red; } a[href="http://www.baidu.com/"]{ color: red; font-size: 30px; } </style> </head> <body> <p title="jing" class="p1">jingchenyong</p> <p title="jing1" class="p1">jingchenyong</p> <a href="http://jsai2016.ujs.edu.cn/yongaibing/index.html">永愛冰</a> <a href="http://www.baidu.com/">baidu</a> </body> </html>
部分屬性值，[title~="jing1"]
後代選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p strong{ color: darkred; } </style> </head> <body> <p>jingchenyong<strong>woxihuanni</strong>xihuanni</p> </body> </html>
子元素選擇器
與後代選擇器相比，子元素選擇器只能選擇作爲某元素子元素的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> h1>strong{ color:blue; font-size: 30px; } </style> </head> <body> <h1>hello <strong>jikekexueyuan</strong> wolaile</h1> <p>hello <strong>jikekexueyuan</strong> wolaile</p> </body> </html>
相鄰兄弟選擇器：
可選擇緊接在另一個元素後的元素，且二者有相同父元素
例如：h1+p{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> li+li{ color:red; } </style> </head> <body> <ul> <li>hello</li> <li>hello</li> <li>hello</li> </ul> </body> </html>