Css 在具有不同样式的容器中为不同的div或选择器设置样式

仍然在接受内联CSS，并想知道这是真的很容易，还是我想得太多了

是否可以使用不同的样式在容器中设置不同的div或选择器的样式

比如说。我在一个容器中有几个div[A，B，C&D]，它们要求A:link为红色，而同一个容器中的divs E&F的样式不同，比如说，蓝色。可以通过以下方式实现：

}.main-content-divA a:link, .main-content-divB a:link, .main-content-divC a:link, .main-content-divD a:link,{
color: #ff0000;
text-decoration: none;}

}.main-content-divE a:link, .main-content-divF a,{
color: #00ffff;
text-decoration: none;}

---

“预处理器”是一种方式吗？

有什么原因不能只使用类吗

<div id="container">
    <div class="typeA">
        <a href="#">Should be #ff0000</a>
    </div>
    <div class="typeA">
        <a href="#">Should be #ff0000</a>
    </div>
    <div class="typeB">
        <a href="#">Should be #0000ff</a>
    </div>
    <div class="typeB">
        <a href="#">Should be #0000ff</a>
    </div>
</div>

---

有很多有趣的选择器，也许这会有帮助：

我想你会想要这样的东西：X:nth child（n）（在那个列表中是第22个）。 或者非常相似

希望这有帮助，德国劳埃德船级社。

<div class="main-content">
    <a href="">My Link</a>
</div>
<div class="main-content">
    <a href="">My Link</a>
</div>
<div class="main-content">
    <a href="" class="blue">My Link</a>
</div>
<div class="main-content">
    <a href="" class="blue">My Link</a>
</div>

.main-content a{
   color:#ff0000;
   text-decoration:none;
}
.main-content a.blue{
    color:#00ffff;
}

.主要内容a{
颜色：#ff0000；
文字装饰：无；
}
主要内容a.蓝色{
颜色：#00ffff；
}

Html

<div id="wrapper">
  <div class="typeA">
      <a href="#">red Links</a>
  </div>
  <div class="typeB">
      <a href="#">red Links</a>
  </div>
  <div class="typeC">
      <a href="#">red Links</a>
  </div>
  <div class="typeD">
      <a href="#">red Links</a>
  </div>
  <div class="typeE">
      <a href="#">blue links</a>
  </div>
  <div class="typeF">
      <a href="#">blue links</a>
  </div>
</div>

---

谢谢试图保持CSS简短，并为a链接使用“一网打尽”的样式。我确信我已经看到了，但我可能会把它与其他东西混淆起来。谢谢Marc，连同Joe的输入，我应该有答案。虽然所有其他答案都足够了，但通过使用重写继承属性，这可以最好地模拟您的行为。我想这很可能是我想要的。干杯如果它解决了你的问题，我们一定会接受它否则，请发表评论，以便我和其他人可以帮助您解决问题！谢谢你和其他人。

<div id="wrapper">
  <div class="typeA">
      <a href="#">red Links</a>
  </div>
  <div class="typeB">
      <a href="#">red Links</a>
  </div>
  <div class="typeC">
      <a href="#">red Links</a>
  </div>
  <div class="typeD">
      <a href="#">red Links</a>
  </div>
  <div class="typeE">
      <a href="#">blue links</a>
  </div>
  <div class="typeF">
      <a href="#">blue links</a>
  </div>
</div>

#wrapper a {
  color: red;
}
#wrapper .typeE a, #wrapper .typeF a {
  color: blue;
}