對于span標簽為什么子選擇器和后代選擇器效果一樣呢
下面兩個為什么效果會一樣呢？按照子選擇器和后代選擇器的區別，子選擇器應該只對第一層標簽有效果吧？那第一個例子中的“”如“”是不是就不應該有顏色呢？
1
.first》span{color:red;}
<span>膽小<span>如</span>鼠</span>
2
.first span{color:red;}
<span>膽小<span>如</span>鼠</span>
慕圣5475749
2017-08-31
5 回答
舉報
0/150
提交
取消
2018-07-09
你別用color作比較啊，換個明顯的屬性就能對比出區別了，幫你做個對比
<!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
第一個,子選擇器中的直接后代即第一代后代<span>包含了另一個<span>
.first>span{color:red;} <span>膽小<span>如</span>鼠</span>你可以理解為<span>(膽小<span>如</span>鼠)</span>,所以顏色會改變
2017-09-02
繼承了父級span的color屬性，
2017-08-31
剛才那個回答錯了，>作用于第一個后代沒問題，但是你的兩個span標簽，第一個子代就是最外層的span標簽，如包含在里面，所以如也有顏色。也就是說你得這兩個span標簽，第一代包含了第二代！所以第二代也變色了
2017-08-31
你添加第三個span標簽試試看，也許會發現不同