Это похоже на такой глупый вопрос, но я не могу найти ответ нигде.
Есть ли способ установить несколько свойств CSS для одного значения
border-left, border-right: 1px solid #E2E2E2;
способ, которым вы можете управлять с помощью селекторов?
.wrapper, .maindiv { ... }
Неа. Но для вашего примера вы можете сделать это:
border: solid #E2E2E2;
border-width: 0 1px;
Атрибуты, где могут быть отдельные значения для верхнего, правого, нижнего и левого (например, border- *, margin, padding), обычно можно комбинировать в одном атрибуте.
Невозможно, если вы не выполните:
border: 1px solid #E2E2E2;
.., который устанавливает одну и ту же границу со всех сторон. Если вы хотите управлять ими индивидуально, вы должны записать их в виде отдельных инструкций.
Обратите внимание, что в некоторых случаях вы можете установить несколько значений для одного атрибута, но вы не можете иметь несколько атрибутов с одним значением в одном выражении.
Невозможно использовать простой css, но вы можете посмотреть scss или less, у которых могут быть решения для вашей проблемы.
Решение с простым css выглядит следующим образом:
border: 1px solid #E2E2E2;
border-width: 0px 1px;
Если атрибуты связаны друг с другом, как в случае с border-left и border-right, обычно существует общий атрибут, который позволяет их установить:
border: 1px solid #e2e2e2;
С другой стороны, существуют некоторые библиотеки, такие как Less CSS, которые расширяют CSS, чтобы вы могли легко группировать связанные свойства и атрибуты.
Если вы используете sass, попробуйте следующее:
@mixin border($properties , $value){
@each $property in $properties{
border-#{$property}: $value;
}
}
selector{
@include border(left right, 1px solid #E2E2E2);
}
CSS не допускает такого контроля. Обходным путем является использование большего правила, а затем его ограничение:
border: 1px solid #E2E2E2;
border-top: 0;
border-bottom: 0;
Но у вас больше кода. Другое решение - использовать компилятор CSS, например SASS или Less