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都在重复。我已经看到了一些使用asterix等的高级CSS，但还没有探索过那种东西。我想有更好的方法可以做我正在做的事情。

任何指针？

Answer 1

不是，除非您使用其他技术，例如SASS。

星号*用于定位与其标记无关的任何元素 - 除非<blah>，<meh>，<getting_long>和<super_long>元素，出现在#main_login内，您可以使用类似......

的内容

#main_login * { /* property list */ }

替代方法可能是修改HTML，以便所有这些元素共享一个类属性，然后简单地定位该类...但是当你应该反过来时，你正在改变你的HTML以迎合你的CSS

Answer 2

我所知道的只是使用类似LESS的内容：

#main_login {
    input[type=text] {
    }

    input[type=password] {
    }
}

Answer 3

您可以尝试使用星号：

#main_login *
{
  ....
}

但是，由于您不仅要选择所有元素，因此您必须使用CSS3的:not()选择器来排除某些元素：

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

您可以通过创建新类并将其应用于这些元素来获得更好的运气，因为您可以在CSS中使用多个类：

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

我有时会使用复杂的样式表，因为我基本上可以用英语写出来描述与该元素相关的样式。

Answer 4

使css更简洁易读的一个好方法是使用SCSS / SASS - http://sass-lang.com/。 SCSS是CSS的超集，允许您定义变量，创建混合和嵌套定义。它要求您使用预处理器来生成最终的css，但是有许多可用的Web框架的插件。

以上内容可以改写为：

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

Answer 5

这完全取决于您尝试匹配的子元素以及是否存在与您的用例匹配的CSS选择器类型。

*可用于匹配所有元素，但它可以作用域：

#main_login * { }

这将匹配#main_login下的所有元素。或者您可以将其范围限定为特定的元素类型：

#main_login div { }

这将匹配#main_login下的所有div。

以下是选择器的CSS2参考：

CSS3添加了许多新的选择器，但旧浏览器不支持：

Answer 6

你可以有一个包装类或id

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

为

定义css

.wrapper {
}

就足够了。或者只为

定义css

#main_login {
}