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