1、子元素选择器
概念:子元素只能选择某元素下的子元素,直接后代选择器。
语法:father > children
栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> section > div { color: #ff0000; } </style> </head> <body> <section> <article>section下的article</article> <div>section下的div</div> <article> <div>section下的article下的div</div> </article> <div>section下的div</div> </section> </body> </html>
效果图:
解释:section的儿子div,孙子div不起作用,儿子article不起作用。
2、相邻兄弟元素选择器
概念:选择紧接在该元素后的元素
语法:element + sibiling
栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> section > div + article { color: #ff0000; } </style> </head> <body> <section> <div>section下的div</div> <article>section下的article</article> <aside>section下的aside</aside> <article>section下的article</article> <div>section下的div</div> </section> </body> </html>
效果图:
解释:选中section下紧跟div后的article元素。
3、通用兄弟元素选择器
概念:选择某一元素后面的所有兄弟元素
语法:element ~ sibiling
栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> section > div ~ article { color: #f00; } </style> </head> <body> <section> <article>section下的article</article> <div> <article>div下的article</article> </div> <article>section下的article</article> <article>section下的article</article> </section> </body> </html>
效果图:
解释:选中section下div后所有article元素,子元素不算,仅仅是相邻兄弟元素。
4、群组选择器
概念:将具有相同样式的选择器放在一起,用","隔开。
语法:element1,element2,element3...
栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> section>article,section>aside,section>div { color: #f00; } </style> </head> <body> <section> <article>section下的article</article> <aside>section下的aside</aside> <div>section下的div</div> </section> </body> </html>
效果图:
解释:选中article,aside,div元素。