时间:2011-03-17 22:48:12

标签: css css-selectors

我很好奇是否有更快的方法来实现这一目标。

比如说我有以下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,但还没有探索过那种东西。我想有更好的方法可以做我正在做的事情。

任何指针?

6 个答案:

答案 0 :(得分:2)

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

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

的内容
#main_login * { /* property list */ }

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

答案 1 :(得分:2)

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

#main_login {
    input[type=text] {
    }

    input[type=password] {
    }
}

答案 2 :(得分:2)

您可以尝试使用星号:

#main_login *
{
  ....
}

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

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

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

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

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

答案 3 :(得分:1)

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

以上内容可以改写为:

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

答案 4 :(得分:1)

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

*可用于匹配所有元素,但它可以作用域:

#main_login * { }

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

#main_login div { }

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

以下是选择器的CSS2参考:

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

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

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

答案 5 :(得分:-1)

你可以有一个包装类或id

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

定义css
.wrapper {
}

就足够了。或者只为

定义css
#main_login {
}