【温故知新】CSS学习笔记（后代和子代选择器）
生活随笔
收集整理的這篇文章主要介紹了
【温故知新】CSS学习笔记（后代和子代选择器）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
后代和子代選擇器
?
CSS的選擇器除了之前介紹的基本選擇器之外，還有符合選擇器，可以處理一些基本選擇器無法處理的難題。
1、后代選擇器
比如下面的例子，我們需要將所有的“Hello”選擇出來，當然我們可以使用類選擇器，但是要是p標簽的數量有N個，豈不是要累死人的節奏。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試</title> </head> <body><div>和平精英</div><div>刺激戰場</div><div><p>Hello</p></div><div><p>Hello</p></div><p>魔獸世界</p><p>灌籃高手</p> </body> </html>這里就可以使用到后代選擇器，后代選擇器又稱為包含選擇器，用來選擇元素或者元素組的后代，寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格隔開，當標簽發生嵌套時，內層標簽就成為了外層標簽的后代。
比如上面的例子，我們就可以這樣寫：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試</title><style>div p{color:deeppink;}</style> </head> <body><div>和平精英</div><div>刺激戰場</div><div><p>Hello</p></div><div><p>Hello</p></div><p>魔獸世界</p><p>灌籃高手</p> </body> </html>?
擴展一下，只要中間包含空格的都將稱之為后代選擇器，那么將后一個“Hello”變成紫色，我們就可以這樣寫：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試</title><style>div p{color:deeppink;}.hello p{color: purple;}</style> </head> <body><div>和平精英</div><div>刺激戰場</div><div><p>Hello</p></div><div class="hello"><p>Hello</p></div><p>魔獸世界</p><p>灌籃高手</p> </body> </html>?
?
2、子代選擇器
跟后代選擇器相對的還有子代選擇器。
比如下面的例子，我們需要將“一級菜單”變成粉色，要是直接使用上面講的后代選擇器（所有的后代），那么所有的菜單都將變成粉色。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>子代選擇器</title><style>ul li a{color: pink;}</style> </head> <body><ul><li><a href="#">一級菜單</a><div><a href="#">二級菜單</a><a href="#">二級菜單</a><a href="#">二級菜單</a></div>?? ????</li></ul> </body> </html>?
子代選擇器的話我們需要用“>”進行分割，比如上面的例子，第一個“a”（也就是一級菜單），它是“li”的親兒子，下面的頂多算他的孫子，那么我們要把一級菜單選出來就可以這樣寫：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>子代選擇器</title><style>ul li > a{color: pink;}</style> </head> <body><ul><li><a href="#">一級菜單</a><div><a href="#">二級菜單</a><a href="#">二級菜單</a><a href="#">二級菜單</a></div>?? ????</li></ul> </body> </html>?
總結
以上是生活随笔為你收集整理的【温故知新】CSS学习笔记（后代和子代选择器）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【温故知新】CSS学习笔记（开发者工具介
- 下一篇： 【温故知新】CSS学习笔记（链接伪类选择