Question

divClass > ul > li > a和divClass ul li a之间的CSS样式有什么区别基本上我试图设置一个锚标签，它在li和li当然属于ul而ul是在div和div内class name是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

＆＃34; >＆＃34;是child selector

＆＃34; ＆＃34;是descendant selector

不同之处在于，后代可以是该元素的子女，或该元素的子女的子女或儿童的子女的子女。

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

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

对于此示例，foo *将匹配<bar>和<baz>，而foo > *仅匹配<bar>。 Source

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;    
    }

<ul>＆gt;之间css样式的差异<li>和<ul> <li>

3 个答案: