我很好奇是否有更快的方法来实现这一目标。
比如说我有以下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,但还没有探索过那种东西。我想有更好的方法可以做我正在做的事情。
任何指针?
答案 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添加了许多新的选择器,但旧浏览器不支持:
答案 5 :(得分:-1)
你可以有一个包装类或id
<div class="wrapper">
<div id="main_login">
...
</div>
</div>
为
定义css.wrapper {
}
就足够了。或者只为
定义css#main_login {
}