样式表重叠问题答案

【问题标题】：Issue with stylesheet overlap样式表重叠问题
【发布时间】：2016-01-07 09:30:46
【问题描述】：

我正在尝试在现有应用程序中添加一项功能。在现有代码中，他们为<ul> 和<li> 标签应用了样式。我试图在使用以下代码的同一页面中放置一个水平条。

<div id="tabs" style="height:750px; margin-top:10px;">
  <ul>
    <li><a href="#tabs-1">Information</a></li>
    <li><a href="#tabs-2">Center</a></li>
    <li><a href="#tabs-3">Location</a></li>
    <li><a href="#tabs-4">Receipt</a></li>
  </ul>
  <div id="tabs-1">

  </div>
  <div id="tabs-2">

  </div>
  <div id="tabs-3">

  </div>

<div id="tabs-4">


</div>
</div>

现在有什么方法可以为我在这段代码中提到的ul 应用样式表吗？我从一个使用 jquery-ui.css 的小提琴中获得了水平选项卡的代码。在应用程序中，我们使用tiles.xml 来应用样式表，它的设计方式使所有页面都通用。

【问题讨论】：

"现在有什么方法可以为我在这段代码中提到的 ul 应用样式表吗？" -- div#tabs > ul
#tabs > ul {style: here;}???
我试过了，但我发现用户代理风格是唯一有效的方法。我使用 reset.css 删除了我的样式仍然没有被应用。只有 reset.css 规则页面。

标签： jquery css overlap

【解决方案1】：

您可以使用父子概念来做到这一点。使用您自己制作的默认样式表并在 id="tabs" 的位置添加父类，您可以在其他 div 中添加任何子类，然后您可以应用您想要使用的属性。

【讨论】：

请举例说明。

【解决方案2】：

向 ul 添加一个 id/class，然后在样式表样式中添加它，例如

HTML

<ul id="myId">
    <li>a list item</li>
</ul>

CSS

#myId {
    position: relative;
    // etc. etc.
}

提示：切勿使用内联样式。

【讨论】：