Question

这个css块是否正确？如果不是为什么？

.leftnav ul li a {  
text-decoration: underline;  
background-color: red;  
width: 120px; 
}

Answer 1

这部分是正确的：

text-decoration: underline;  
background-color: red;

注意：如果您想在text-decoration: underline;元素上使用重叠a，请使用此属性，否则您不需要使用text-decoration: underline;因为，默认值{{ 1}} text-decoration元素为a。

这部分是错误的：

underline

width: 300px;代码为内联元素，内联元素不接受a property.add width或display: inline-block;代码更改宽度的css代码。

比较此代码：

display: block;

.yourleftnav ul li a {  
    text-decoration: underline;  
    background-color: red;  
    width: 300px; 
}

.myleftnav ul li a {    
    background-color: red;  
    width: 300px; 
    display: inline-block;
}

Answer 2

部分有效。选择器没问题，它定位a，li的后代是ul的后代，.leftnav的后代是width的后代。

声明没问题，但要将a应用于display:block（内联元素），您应该添加display: inline-block或Initialize。

Answer 3

这取决于您的期望。元素a是一个内联元素，它使width定义变得多余。见下文：

＆＃13;

.leftnav ul li a {
  text-decoration: underline;
  background-color: red;
  width: 120px;
}

＆＃13;

<div class="leftnav">
  <ul>
    <li><a href="#">Hi</a></li>
  </ul>
</div>

＆＃13;

要使其实际为120像素宽，您需要将其定义为inline-block。

＆＃13;

.leftnav ul li a {
  text-decoration: underline;
  background-color: red;
  width: 120px;
  display: inline-block;
}

＆＃13;

<div class="leftnav">
  <ul>
    <li><a href="#">Hi</a></li>
  </ul>
</div>

＆＃13;

这个css块是否正确？如果不是为什么？

3 个答案: