css - 使用不同样式在容器中设置不同的 div 或选择器

Question

仍然接受内联 CSS 并想知道这是否真的很容易或者我想太多了。

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

例如。我在一个容器中有几个 div [A,B,C & D] 需要 a:link 为红色，并且同一容器中的 div 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;}

“预处理器”针对新的不同样式的容器中的多个选择器是要走的路吗？

Answer 1

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

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

Answer 2

你有什么理由不能只使用类吗？

<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>

和

#container .typeA a:link {
    color: #ff0000;
    text-decoration: none;
}

#container .typeB a:link {
    color: #00ffff;
    text-decoration: none;
}

Answer 3

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

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

希望这会有所帮助，GL。

Answer 4

<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;
}