Question

我想更改li元素的背景，但我不知道为什么我的代码对它没有任何影响。

我的HTML代码是：

 <ul id="visit"> 
 <li> 

   <li > 
        <a href="http://localhost/wordpress/?p=8" title="فایل‌های آفیس را با افزونه جدید کروم را باز کنید">فایل‌های آفیس را با افزونه جدید کروم را باز کنید</a> 
    </li> 
  <li > 
  <a href="http://localhost/wordpress/?p=1" title="سلام دنیا!">سلام دنیا!</a> 
  </li> 
   <li >        
    <a href="http://localhost/wordpress/?p=258" title="دانلود نرم افزار تم ویندوز ۸ IObit WinMetro 2.0 Beta">دانلود نرم افزار تم ویندوز ۸ IObit WinMetro 2.0 Beta</a> 
  </li> 
   <li > 
    <a href="http://localhost/wordpress/?p=254" title="تنظیم بازی کامپیوتری با  GeForce Experience 1.0.1.0">تنظیم بازی کامپیوتری با  GeForce Experience 1.0.1.0</a> 
   </li> 
   <li > 
    <a href="http://localhost/wordpress/?p=242" title="دانلود Speak English Like An American کتاب و صوت آموزش مکالمه زبان انگلیسی">دانلود Speak English Like An American کتاب و صوت آموزش مکالمه زبان انگلیسی</a> 
   </li> 
   <li > 
     <a href="http://localhost/wordpress/?p=240" title="دانلود نرم افزار بهینه سازی سیستم AVG PC Tuneup Pro 2013 12.0.4010.19">دانلود نرم افزار بهینه سازی سیستم AVG PC Tuneup Pro 2013 12.0.4010.19</a> 
   </li> 
   <li > 
    <a href="http://localhost/wordpress/?p=236" title="دانلود مجموعه بازی SolSuite Solitaire 2013">دانلود مجموعه بازی SolSuite Solitaire 2013</a> 
   </li> 
   <li > 
    <a href="http://localhost/wordpress/?p=224" title="دانلود نرم افزار افیس رایگان LibreOffice v3.6.5">دانلود نرم افزار افیس رایگان LibreOffice v3.6.5</a> 
  </li> 
  <li > 
   <a href="http://localhost/wordpress/?p=214" title="دانلود نرم افزار مخفی کردن ادرس ای پی Hotspot Shield">دانلود نرم افزار مخفی کردن ادرس ای پی Hotspot Shield</a> 
   </li> 
   <li > 
     <a href="http://localhost/wordpress/?p=175" title="دانلود نرم افزارKInovea 0.8.15">دانلود نرم افزارKInovea 0.8.15</a> 
   </li> 

 </li> 


</ul>

我的CSS代码是：

#visit li
{
    border:1px solid red;   
    background-color:#F00;
}

我也试过这个CSS代码：

#visit li li
{
    border:1px solid red;   
    background-color:#F00;
}

但他们两个都不起作用。

我已经用标签位置更改了li位置，并且所有这些也都改变了这样的css代码

    ul#visit  a
    {
        border:1px solid red;   
        background:#F00;
        display:block;
        margin:4px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius:5px;

    }
    ul#visit  a:hover
    {
        background-color:#309;
    }

它有效，但我的问题很坚定。是background-color属性对li元素不起作用吗？

Answer 1

有效。 see fiddle如何LI元素默认没有padding \ margin，所以它看起来像一个实体块。

添加边距或填充以将它们分开

#visit li
{
    border:1px solid red;   
    background-color:#F00;
    margin:1em 0;
}

Answer 2

在第二个ul起始元素之前添加li，然后根据DOM结构关闭它。

<ul id="visit"> 
 <li> 
   <ul>
   <li > 


   </li>
   </ul>
  </li>
</ul>

CSS：使用以下背景颜色

background-color:#F00;

Answer 3

#visit li
{
    border:1px solid red;   
    background:#F00;
    display:block;
    margin:1px 0px 0px 0px;
}

试试这个。

Answer 4

在样式表中的li元素上设置display: block或inline-block。

Answer 5

您使用的是哪种浏览器？我在IE9，Chrome和Firefox中测试你的代码，它适用于所有三个浏览器。我认为你不应该使用“li”元素作为“li”元素的子元素。您可以使用“ul”元素作为“li”元素。所以代码很容易理解。

#visit li.secondchild
{
    border:1px solid red;   
    background-color:green;
    margin:0;
    padding:0;
}

将所有“li”元素设置为一个名为“secondchild”的类属性。

为什么我不能改变<li>元素的背景？</li>

5 个答案: