Question

仍然与内联CSS达成协议，并想知道这是否真的很容易，或者我过度思考。

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

例如。我有几个div [A，B，C＆amp; D]在一个容器内，需要a：link为红色并且对E＆amp; 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;}

“预处理器”targeting multiple selectors in a container for new different styles是可行的吗？

Answer 1

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

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

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

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

希望这有帮助，GL。

Answer 3

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

Answer 4

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

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

4 个答案: