Question

这似乎是一个愚蠢的问题，但我无法在任何地方找到答案。

有没有办法将多个CSS属性设置为一个值

border-left, border-right: 1px solid #E2E2E2;

你可以用选择器做什么？

.wrapper, .maindiv { ... }

Answer 1

不。但是对于你的例子，你可以这样做：

border: solid #E2E2E2;
border-width: 0 1px;

顶部，右侧，底部和左侧可以有单独值的属性（例如，border- *，margin，padding）通常可以组合在一个属性中。

Answer 2

不可能，除非你这样做：

border: 1px solid #E2E2E2;

..在所有方面设置相同的边框。如果要单独控制它们，则必须将它们作为单独的语句编写。

请注意，在某些情况下，您可以为一个属性设置多个值，但在一个语句中不能有多个具有一个值的属性。

Answer 3

使用普通css无法做到，但您可以查看可能有问题解决方案的scss或less。

普通css的解决方案如下：

border: 1px solid #E2E2E2;
border-width: 0px 1px;

Answer 4

如果属性相关，例如border-left和border-right，则通常会有一个允许您设置它们的公共属性：

border: 1px solid #e2e2e2;

另一方面，有一些像Less CSS这样的库可以扩展CSS，以便您可以轻松地对相关的属性和属性进行分组。

Answer 5

CSS不允许这样的控制。解决方法是使用更大的规则，然后限制它：

border: 1px solid #E2E2E2;
border-top: 0;
border-bottom: 0;

但是你最终得到了更多的代码。另一种解决方案是使用CSS“编译器”，如SASS或Less

Answer 6

如果你正在使用sass，试试这个：

@mixin border($properties , $value){
    @each $property in $properties{
        border-#{$property}: $value;
    }
}

selector{
    @include border(left right, 1px solid #E2E2E2);
}

将相同的值设置为多个属性（CSS）

6 个答案: