對(duì)于span標(biāo)簽為什么子選擇器和后代選擇器效果一樣呢
下面兩個(gè)為什么效果會(huì)一樣呢？按照子選擇器和后代選擇器的區(qū)別，子選擇器應(yīng)該只對(duì)第一層標(biāo)簽有效果吧？那第一個(gè)例子中的“”如“”是不是就不應(yīng)該有顏色呢？
1
.first》span{color:red;}
<span>膽小<span>如</span>鼠</span>
2
.first span{color:red;}
<span>膽小<span>如</span>鼠</span>
2018-07-09
你別用color作比較啊，換個(gè)明顯的屬性就能對(duì)比出區(qū)別了，幫你做個(gè)對(duì)比
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Title</title> ????<style?type="text/css"> ????????.a>span{ ???????????color:red; ???????????border:?1px?solid?red?; ????????} ????????.b?span{ ????????????color:red; ????????????border:?1px?solid?red?; ????????} ????????.c>span{ ????????????color:red; ????????????border:?1px?solid?red?; ????????} ????????.d?span{ ????????????color:red; ????????????border:?1px?solid?red?; ????????} ????</style> </head> <body> <p?class="a"> ????<!--子元素--> ?<span>膽小<span>如</span><!--孫元素-->鼠</span> </p> <p?class="b"> ????<!--子元素--> ?<span>膽小<span>如</span><!--孫元素-->鼠</span> </p> <p?class="c"> ????<span>膽小</span><!--子元素-->如<span>鼠</span><!--子元素--> </p> <p?class="d"> ????<span>膽小</span><!--子元素-->如<span>鼠</span><!--子元素--> </p> </body> </html>2017-09-07
第一個(gè),子選擇器中的直接后代即第一代后代<span>包含了另一個(gè)<span>
.first>span{color:red;} <span>膽小<span>如</span>鼠</span>你可以理解為<span>(膽小<span>如</span>鼠)</span>,所以顏色會(huì)改變
2017-09-02
繼承了父級(jí)span的color屬性，
2017-08-31
剛才那個(gè)回答錯(cuò)了，>作用于第一個(gè)后代沒問題，但是你的兩個(gè)span標(biāo)簽，第一個(gè)子代就是最外層的span標(biāo)簽，如包含在里面，所以如也有顏色。也就是說你得這兩個(gè)span標(biāo)簽，第一代包含了第二代！所以第二代也變色了
2017-08-31
你添加第三個(gè)span標(biāo)簽試試看，也許會(huì)發(fā)現(xiàn)不同