多类选择器
效果图：
代码：
<!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>