兩者之間的CSS樣式差異 <ul> &gt; <li> 和 <ul><li>

Question

divClass > ul > li > a和divClass ul li a之間的css樣式有什么區別，基本上我正在嘗試設置li中的錨標簽，而li當然屬於ul，而ul在div和div類名內是classDiv，我已經做過一些基礎研究，並且我嘗試了兩種方式，但是還沒有工作，這是html

<div class="classDiv">            
        <ul>                
            <li class="abc">google.com</li>                
        </ul>                            
    </div>

和CSS

.classDiv > ul > li > a:hover{    
color: green;
background-color: skyblue;
cursor: pointer;    
}

Answer 1

“ > ”是子選擇器

” “是后代選擇器

區別在於，后代可以是元素的子代，也可以是元素的子代，也可以是子元素的子代。

子元素就是直接包含在父元素中的子元素：

<foo> <!-- parent -->
  <bar> <!-- child of foo, descendant of foo -->
    <baz> <!-- descendant of foo -->
    </baz>
  </bar>
</foo>

在此示例中， foo *將匹配<bar>和<baz> ，而foo > *將僅匹配<bar> 。 資源

Answer 2

用這個

  .classDiv > ul > li > a:hover { color: green; background-color: skyblue; cursor: pointer; } 

 <div class="classDiv"> <ul> <li> <a href="www.google.com">Google.com</a> </li> </ul> </div> 

Answer 3

/*you can try this is also working */
        <div class="classDiv">            
                <ul>                
                    <li class="abc"><a href="#">google.com</a></li>                
                </ul>                            
            </div>

    .classDiv li a{    
    color: white;
    background-color: skyblue;
    cursor: pointer;    
    }

    .classDiv li a:hover{    
    color: green;
    background-color: skyblue;
    cursor: pointer;    
    }