Question

我正在网站上工作，我正在添加几个按钮，问题是它需要主css并破坏我按钮的外观。

页面中的代码（对于按钮）是：

<ul class="tabs">
  <li><a href="../frequently-asked-questions#tab1">Placing an Order</a></li>
  <li><a href="../frequently-asked-questions#tab2">Delivery</a></li>
  <li><a href="../frequently-asked-questions#tab3">Returns</a></li>
  <li><a href="../frequently-asked-questions#tab4">VAT</a></li>
</ul>

CSS：

  * {padding:0; margin:0;}
  html {
     padding:15px 15px 0;
     font-family:sans-serif;
     font-size:14px;
   }

  p, h3 { 
    margin-bottom:15px;
  }

  div {
    padding:10px;
    width:600px;
    background:#fff;
  }

  .tabs li {
    list-style:none;
    display:inline;
  }

  .tabs a {
    padding:5px 10px;
    display:inline-block;
    background:#104e8b;
    color:#ffffff;
    text-decoration:none;
  }

  .tabs a.active {
    background:#00b0d8;
    color:#ffff;
  }

我不知道您是否可以看到该代码，但它只是＆lt;中的列表项。 ul class =＆＃34; tabs＆＃34;＆gt; DIV。原谅这些空间，但它不会出现。

我的问题是：如何让.css代码在页面的特定部分上工作？我的页面从.css文件的其余部分获取.css，它会混淆一切。我可以指定＆lt; ul＆gt;一个名字并在.css中引用它？它对我没用。

请帮忙！谢谢:)

Answer 1

尽管可能，你应该尽量避免！重要。

通过使用更具体的选择器，这听起来像是你的问题，没有得到很清楚的解释。 css中的想法是定义适用于所有内容的一般样式，而选择器特异性规则允许您将异常应用于样式特定组件。

例如，为整个网站定义.tabs {style A}，但对于一个特定页面，请定义＃specific-page .tabs {style B}。样式B仅在＃specific-page元素下使用

本文非常好地解释了这个重要的CSS概念：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

编辑：我建议阅读有关上下文样式的内容，因为我在这里提出的建议并不理想

我想在按钮上使用特定的css代码（超过主css）

1 个答案: