CSS - 给所有div添加边框

Question

我想知道是否有一种“简单”的方式通过 CSS 添加以下代码： border: 1px solid red; 到所有的 div 元素上，无论它们的 id 是什么。

我意识到这可能是一个非常非常基本的问题（或者根本不可能），希望我的表述足够清楚。

只是为了澄清，假设我有这样的 HTML：

<div id="one">

</div>

<div id="two">

</div>

和CSS

#one{
height: 10px;
width: 10px;
}

#two{
height: 10px;
width: 10px;
}

我真正想要的结果是：

#one{

height: 10px;
width: 10px;
border: 1px solid red;
}

#two{
height: 10px;
width: 10px;
border: 1px solid red;
}

我希望不必逐个去实现这个。

先行致谢！

如有需要，请提出澄清问题！

- Trufa

---

我建议先了解CSS的基础知识，可以从阅读Dave Raggett在W3上发布的文章开始（http://www.w3.org/MarkUp/Guide/Style）。 - David Thomas

现在我明白这是一个很愚蠢的问题：）我只是被阻止了！！谢谢大家 - Trufa

Opera有一门关于HTML和CSS的免费在线课程（http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/）。它非常全面，节奏轻松。还有很多例子。 - William Linton

我的观点绝不是为了让你因为提问而感到愚蠢（毕竟，Stackoverflow的目的就是成为软件/编程/脚本问答的主要库），只是在提示你应该阅读一些基础知识。如果我造成了任何冒犯，我很抱歉，那并非我的本意。 - David Thomas

Answer 1

div {
    border: 1px solid #000000;
}

- McAden

---

我简直不敢相信我没能预见到那个问题，非常感谢你。对于这个愚蠢的问题，非常抱歉，非常感谢。 - Trufa

这并不是一个愚蠢的问题，只是没有完全理解css的工作原理。如果这是有意义的话，我建议使用class。大多数页面都有很多div对象，如果为每个对象添加边框，那将会很疯狂。 - McAden

Answer 2

我同意@McAden的答案。 或者，你可以使用jQuery动态添加样式：

<script type="text/javascript">
    $('div').css('border','1px solid #000');
</script>

- code90

---

下投票者确实应该解释他们的反对票，但我猜想这可能与过度复杂化有关。你说的是正确的，但对于特定情况来说有些过度了。 - David Thomas

Answer 3

正如 McAden 所说的，您可能想要指定要样式化的 div。 您可以尝试以下方法，而不是为每个 div 添加一个类：

.theseDivs div{
    /*styles here*/
}

<div class="theseDivs">
    <div>Style applied here</div>
    <div>and here, </div>
</div>
<div>but not here</div>

- sissonb

Answer 4

对于所有元素

<style> * {
    border: 1px solid #000000;
}
</style>

- 3xCh1_23

Answer 5

CSS Using
#one{
height: 100px;
width: 100px;
border:1px solid #000;
}
// you can use sepertely
#two{
height: 100px;
width: 100px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

JQuery 使用

<script type="text/javascript">
    $('#one').css('border','1px solid #000');
</script>

- Ravi Chauhan

Answer 6

也许这会对你有所帮助：

div#one, div#two{
    border:1px solid red;
}

- Oto Brglez

---

虽然不完全符合他的要求，但教他逗号语法还是很好的。 - Christian Mann

Answer 7

$('div').css("border", "1px solid #CCC");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div>
1
  <div>
    3
    </div>
<div>
2
</div>
</div>

- Sukesh Chand

Answer 8

纯JavaScript：

const style = document.createElement('style');
style.innerHTML= "div {border: 1px solid #FF0000 !important};";
document.head.appendChild(style);

- Nezumi

---

谢谢您提供的这段代码片段，它可能会提供一些有限的即时帮助。一个适当的解释会大大提高其长期价值，因为它会展示为什么这是一个好的解决方案，并且会使其对其他类似问题的未来读者更有用。请[编辑]您的回答，添加一些解释，包括您所做的假设。 - jasie