有没有简单的方法来实现这与CSS？

例如说我有以下的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'ers使用asterix等，但还没有探索这种事情。我想有更好的方式去做我正在做的事情。

任何指针？

来源

2011-03-17 willdanceforfun

非常好的问题，我想也知道这一点。 – 2011-03-17 22:49:51

不可以。不使用另一种编译/生成为纯CSS的语法。 – 2011-03-17 22:52:47

我使用PHP来生成我的CSS时，它开始变得乏味和困惑，通过。变量特别好。 – Sam 2011-03-17 23:06:36

只有这样，我知道的是使用像LESS：

#main_login { 
    input[type=text] { 
    } 

    input[type=password] { 
    } 
}

来源

2011-03-17 22:54:14 Melv

少看起来棒极了！感谢这一点。 – willdanceforfun 2011-03-18 00:24:15

-1

你可以有一个包装类或ID

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

这样定义的CSS

.wrapper { 
}

就足够了。或者只是定义css为

#main_login { 
}

来源

2011-03-17 22:52:41 gok

.......为什么不呢？ – gok 2011-03-17 22:53:58

因为你改变你的HTML以迎合你的CSS时，它应该是相反的方式。除了最佳实践/个人偏好讨论之外，这个问题甚至没有为HTML添加标签，而是专门针对[选择器]（http://www.w3.org/TR/CSS2/selector.html）;） – 2011-03-17 23:01:05

实际上并没有解决他所问的问题。 – Sam 2011-03-18 00:16:57

不是真的，除非你使用其他技术如SASS。

阿斯特里克斯*被用来针对任何元素，他们不相干的标签 - 因此，如果只是<blah>，<meh>，<getting_long>和<super_long>元素出现的#main_login里面，你可以使用类似...

#main_login * { /* property list */ }

另一种方法可以是修改您的HTML，以便所有这些元素共享一个类属性，然后简单地定位该类......但是，当您改变HTML以迎合您的CSS时，它应该是相反的方式。

来源

2011-03-17 22:52:45

我要引用我的消息来源，承认我从未使用过SASS，但是在[2010年4月的@Jeff Atwood的博客]上阅读了它（http://www.codinghorror.com/blog/2010/04/whats -wrong-with-css.html） – 2011-03-17 22:58:35

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

以上可改写为：

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

来源

2011-03-17 22:55:06 tilleryj

很酷！喜欢嵌套的想法。谢谢 – willdanceforfun 2011-03-18 00:23:31

sass看起来很棒 – willdanceforfun 2011-03-18 03:21:20

我喜欢它。现在我使用SCSS，我的样式表更具可读性和可维护性。 – tilleryj 2011-03-18 03:40:54

你可以尝试使用星号：

#main_login * 
{ 
    .... 
}

但既然是有原因的，你不只是选择所有的元素，你会必须使用CSS3的:not()选择排除某些元素：

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

你可能有BETT呃运气只是通过创建一个新的类，并把它应用到这些元素，因为你可以使用CSS中的多个类：

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

我这样做有时复杂的样式表，因为我可以用英语基本上写来形容风格属于那个元素。

来源

2011-03-17 22:55:13 Blender

+1：使用'：not' ...好主意！浏览器如何支持？ – 2011-03-17 22:56:58

似乎没有任何版本的IE（IE9除外）支持它，但它几乎适用于所有其他浏览器。有一些库为IE添加了很多CSS3选择器：http://selectivizr.com/。 – Blender 2011-03-17 23:01:39

太好了。我不知道你可以使用排除。 – willdanceforfun 2011-03-18 00:19:53

这一切都取决于您尝试匹配的子元素以及是否存在与您的用例相匹配的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

来源

2011-03-17 22:57:21

有没有简单的方法来实现这与CSS？

回答

相关问题