Есть ли сокращенный способ добиться этого с помощью CSS?

Question

Мне любопытно, есть ли немного более быстрый способ добиться этого.

Скажем, например, у меня есть следующий CSS:

 #main_login input[type=text], #main_login input[type=password] {

 }

Есть ли более быстрый способ? Иногда у меня может быть строка с большим количеством объявлений, например

 #main_login blah, #main_login meh, #main_login getting_long, #main_login super_long {

 }

Слишком много повторений #main_login. Я видел несколько продвинутых CSS-пользователей, использующих asterix и т. Д., Но еще не исследовал подобные вещи. Я полагаю, есть лучший способ сделать то, что я делаю.

Есть указатели?

Answer 1

Вы можете попробовать использовать звездочку:

#main_login *
{
  ....
}

Но поскольку есть причина, по которой вы не просто выбираете все элементы, вам придется использовать селектор CSS3 :not(), чтобы исключить определенные элементы:

#main_login *:not(.foo, .bar,, div.exclude_me)
{
  ....
}

Возможно, вам повезет больше, просто создав новый класс и применив его к этим элементам, поскольку вы можете использовать несколько классов в CSS:

<div class="underlined big orange foobar">Foobar</div>

Иногда я делаю это ссложные таблицы стилей, так как я могу писать на английском языке, чтобы описать стили, относящиеся к этому элементу.

Answer 2

Единственный известный мне способ - использовать что-то вроде МЕНЬШЕ :

#main_login {
    input[type=text] {
    }

    input[type=password] {
    }
}

Answer 3

Не совсем, если только вы не используете другую технологию, такую ​​как SASS .

Звездочка * используется для нацеливания на любой элемент, независимо от его тега - так что если ничего, кроме <blah>, <meh>, <getting_long> и <super_long> элементы появляются внутри #main_login, вы можете использовать что-то вроде ...

#main_login * { /* property list */ }

Альтернативой может быть изменение вашего HTML, чтобы все эти элементы разделялиатрибут класса, а затем просто нацельтесь на этот класс ... но затем вы меняете свой HTML, чтобы он соответствовал вашему CSS, когда это должно быть наоборот.

Answer 4

Все зависит от того, какие подэлементы вы пытаетесь сопоставить, и есть ли тип селектора CSS, соответствующий вашему варианту использования.

* можно использовать для сопоставления всех элементов, однако это можетbe scoped:

#main_login * { }

Это будет соответствовать всем элементам в #main_login.Или вы можете указать его для определенного типа элемента:

#main_login div { }

Это будет соответствовать всем элементам div в # main_login.

Вот ссылка CSS2 для селекторов:

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

CSS3 добавляет много новых селекторов, но не поддерживается старыми браузерами:

http://www.w3.org/TR/css3-selectors/#selectors

Answer 5

Один из отличных способов сделать ваш CSS более кратким и читабельным - это использовать SCSS / SASS - http://sass -lang.com / .SCSS - это расширенный набор CSS, который позволяет вам определять переменные, создавать миксины и определения гнезд.Он требует использования препроцессора для генерации окончательного CSS, но есть плагины для многих веб-фреймворков.

Выше можно переписать как:

#main_login {
  input[type=text], input[type=password] {
    ...
  }
}

Answer 6

вы можете иметь класс обёртки или идентификатор

<div class="wrapper">
<div id="main_login">
...
</div>
</div>

поэтому определение CSS для

.wrapper {
}

было бы достаточно. Или просто определите CSS для

#main_login {
}