Question

我的CSS看起来像这样：

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}

有很多指定左，右，顶部，底部等。有什么方法可以优化/简化CSS。我希望有一条捷径，就像有边界一样。

由于

Answer 1

顶部，底部，左侧，右侧没有简写。

Answer 2

你不能缩短这个：

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}

但你可以缩短它：

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}
div#gbar {position:absolute;top: 10px;bottom: 10px;left:500px; right: 30px;}
div#nbar {position:absolute;top: 10px;bottom: 10px;left:50px; right: 200px;}

对此：

div#sbar, div#gbar, div#nbar { position:absolute; top: 10px; bottom: 10px }

div#sbar { left:10px; right: 10px }
div#gbar { left:500px; right: 30px }
div#nbar { left:50px; right: 200px }

这可能很有用。

此外，无需在div中使用div#sbar：id根据定义是唯一的，因此无需使用标记名称限定id。实际上使用它（真的，真的略微）会减慢浏览器的速度。

所以这会更好（更重要的是，更短）：

#sbar, #gbar, #nbar { position:absolute; top: 10px; bottom: 10px }

#sbar { left:10px; right: 10px }
#gbar { left:500px; right: 30px }
#nbar { left:50px; right: 200px }

这是一个例子，我实际上做了一些与我刚才建议非常相似的事情：

How can I refactor some repetitive HTML and CSS?

在这个问题上实际上效果更好，因为所有div都包含在一个共同的父级中，所以没有必要两次列出这些元素。

Answer 3

优化提示：div

之前无需#sbar

- 附录 -

所有这些属性都不会相互抵消吗？向下移动10px然后将其向上移动10px将无法移动。

Answer 4

您正在寻找类似的内容：

div#sbar {position: absolute 10px 10px 10px 10px;}`

但这并不存在（据我所知）。这会很好。

Answer 5

top，bottom，left或right没有简写方式。

至于你自己的CSS选择器，它会重复两次。我的意思是CSS从右到左解析。

如果你有这样的话：div table tr td#myContent{}以下是发生的事情：

div table tr td＃为myContent {}
找到#myContent！

div table tr td #myContent {}
我们已经找到了#myContent，但还可以！

div table tr td #myContent {}
我告诉过你，我们已经找到了#myContent ...！

div table tr td #myContent {}
就像我说过其他3次，我们已经找到#myContent !!!

div table tr td #myContent {}
...

优化我的CSS

5 个答案: