我试图在一个页面中找到一些简单的客户端性能调整,每页收到数百万的页面浏览量.我有一个问题是使用CSS通用选择器(*).
例如,考虑一个非常简单的HTML文档,如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
通用选择将适用上述声明的body,h1和p元素,这是因为它们在文档中的唯一.
一般来说,我会从以下规则中看到更好的表现:
body, h1, p {
margin: 0;
padding: 0;
}
或者这具有完全相同的净效应？
通用选择器是否执行了我可能不知道的更多工作？
我意识到这个例子中的性能影响可能非常小,但我希望能够学到一些可能会在实际情况中带来更显着的性能提升的东西.
我不打算在文档的后面用其他样式覆盖通用选择器规则中的样式 - 即,将它用作快速和脏的重置样式表.我实际上正在尝试完全按照我的意图使用通用选择器 - 将规则集应用于文档中的所有元素,一劳永逸.
最后,我希望确定通用选择器是否存在固有的缓慢,或者是否由于滥用滥用而导致说唱不好.如果* { margin: 0; }字面上相当于body, h1, p …
为什么flexbox与fieldset其他非div标签无法正常工作？我希望它们在div示例flex-direction: row;中排列在一起,就像在flexbox中一样.然而fieldset是力施加宽度给他们,我不明白为什么.
HTML
<fieldset>
<div>fieldset flexbox</div>
<div>1</div>
<div>2</div>
</fieldset>
<div id="parentdiv">
<div>div flexbox<div>
<div>3</div>
<div>4</div>
</div>
CSS:所有元素都设置为display: flex;