1

我想改变我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 元素？

4

5 回答 5

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

尝试这个。

于 2013-06-19T10:40:08.553 回答
1

有用。看看小提琴如何 LI 元素默认情况下没有填充 \ 边距，所以它看起来像一个实心块。

添加边距或填充以分隔它们

#visit li
{
    border:1px solid red;   
    background-color:#F00;
    margin:1em 0;
}
于 2013-06-19T10:05:43.557 回答
1

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

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


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

CSS：使用下面的背景颜色

background-color:#F00;
于 2013-06-19T10:24:42.090 回答
0

您使用哪种浏览器？我在 IE9、Chrome 和 Firefox 中测试了你的代码，这三种浏览器都可以。而且我认为你不应该使用“li”元素作为“li”元素的子元素。您可以将“ul”元素用作“li”元素。所以代码很容易理解。

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

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

于 2013-06-19T10:17:49.463 回答
0

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

于 2013-06-19T10:15:43.690 回答