Question

我想知道是否有任何“简单”的方式通过css添加让我们说：

border: 1px solid red;

无论他们的身份是什么，所以对所有的div都有。

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

只是为了澄清，让我说我得到了：

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

我希望不必一个接一个地实现这一目标。

提前致谢!!

请询问所需的任何澄清！

Answer 1

div {
    border: 1px solid #000000;
}

Answer 2

我同意@ McAden的回答。或者，您可以使用jquery动态添加样式：

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

Answer 3

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>

Answer 4

也许这会对你有所帮助：

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

Answer 5

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

Answer 6

$('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>

Answer 7

对于所有元素

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

Answer 8

普通JavaScript：

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

CSS - 为所有div添加边框

8 个答案: