Question

我想分别设置border-style，border-width和border-color。特别是，我想为整个文档设置默认border-style为solid，并为各个元素设置border-width和border-color。我有一个HTML：

<body>
  <div id="foo">
    bar
  </div>
</body>

和css：

body{
  border-style: solid;
  border-width: 0px;
}
#foo{
  background: red;
  border-width: 1px;
  border-color: green;
}

border-width: 0px;中的body旨在将默认元素设置为无边框，同时将默认border-style设置为实体（如果我将其删除，则默认为border-style }将按预期设置，但是主体将具有边框，这不是预期的）。 #foo中的所有设置都旨在覆盖默认设置。当我显示时，div#foo周围不会出现边框。为什么没有出现边框，以及正确的方法是什么？

Answer 1

边框样式不是从body元素继承的。您正在寻找universal selector, *，它基本上将样式应用于所有元素，因此用作伪默认样式。

* {
    border-style: solid;
    border-width: 0px;
}

EXAMPLE HERE

Answer 2

我相信你的第一篇文章只是在body元素上应用了一个实线边框，并且该属性不会被其子元素继承。

尝试使用：

* {
  border-style: solid;
  border-width: 0px;
}

~~顺便说一下，您可以删除border-width，因为默认值已经是0px。~~

（编辑以反映评论）

Answer 3

问题是你正在设置身体边界的样式。要为身体的所有元素设置它，您可以使用：

body *{
    border-style: solid;
    border-width: 0px;
}
#foo{
    background: red;
    border-width: 1px;
    border-color: green;
}

Answer 4

你可以写

border-style: inherit;

使用父级的边框样式。或者像@Anonymous说的那样

body * {
    border-style: solid;
    border-width: 0px;
}

适用于所有身体的孩子。

编辑：“继承”表示其直接父级的值。例如：

<body>
  <div id="foo">
    <div id="boo">
    </div>
  </div>
</body>

CSS：

body {
  border-width: 3px;
  border-style: solid;
  padding: 10px;
}

#foo {
  border-width: 3px;
  background: green;
  border-color: green;
  padding: 10px;
  // border-style is not set -> default value "none"
}

#boo {
  border-width: 3px;
  background: yellow;
  border-color: pink;
  border-style: inherit;
  padding: 10px;
  // border-style is "none" because foo's border-style is none
}

分别设置边框的子属性

4 个答案: