通过星号符号（*）表示的通用选择器是与文档中任何元素匹配的CSS中的选择器。这是一个通配符，将样式应用于网页上的所有元素，无论其类型，类别或ID如何。使用时，可以将其与其他选择器结合使用，以在全球应用样式或重置整个文档中的某些属性。
例如，以下CSS规则将对页面上的所有元素设置文本颜色：
<code class="css">* { color: blue; }</code>通用选择器也可以用于更具体的选择器中。例如，要针对带有“容器”类的A <div>内的所有元素，您将写下：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">.container * { margin: 0; padding: 0; }</code></pre><div class="contentsignin">登录后复制</div></div>
<p>这种广泛的适用性使通用选择器成为CSS中强大的工具，但由于其对性能和特异性的影响，应明智地使用它。</p>
<h3>通用选择器（*）如何影响CSS的性能？</h3>
<p>通用选择器（*）可以对性能产生重大影响，这主要是由于浏览器流程和应用CSS规则的方式。这是要考虑的要点：</p>
<ol>
<li>
<strong>增加的计算开销</strong>：使用通用选择器时，浏览器必须检查页面上的每个元素。这意味着浏览器必须将指定样式应用于可能的数千个元素，这可能会导致页面渲染时间较慢。</li>
<li>
<strong>选择器匹配</strong>：与使用更特定的选择器相比，匹配通用选择器的过程固有效率较低。当浏览器遇到通用选择器时，它必须穿越整个DOM树，这增加了渲染所需的时间。</li>
<li>
<strong>对特异性和级联的影响</strong>：由于通用选择器具有非常低的特异性，因此更具体的选择器可以覆盖它。但是，当与其他选择器结合使用时，它仍然可以促成复杂的特异性链，使级联反应复杂化并有可能减慢渲染引擎。</li>
<li>
<strong>回光和重新粉刷</strong>：将样式应用于所有元素都可以触发多个翻新和重新涂漆，尤其是在样式影响边距或填充等布局属性的情况下。这会进一步降低性能，尤其是在移动设备或较旧的硬件上。</li>
</ol>
<p>总而言之，虽然通用选择器很有用，但其广泛的应用可能会导致性能问题，因此很重要，并谨慎考虑其影响。</p>
<h3>可以使用通用选择器（*）在CSS中重置样式，如果是，如何？</h3>
<p>是的，通用选择器（*）可有效地用于重置CSS中的样式。重置样式是一种常见的做法，可以确保在不同的浏览器上呈现一致的渲染，这些浏览器通常具有自己的HTML元素默认样式。这是您可以使用通用选择器重置样式的方法：</p>
<ol>
<li>
<p><strong>全局重置</strong>：您可以使用通用选择器为所有元素重置某些属性。一个常见的例子是将边距和填充重置为零：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">* { margin: 0; padding: 0; }</code></pre><div class="contentsignin">登录后复制</div></div>
</li>
<li>
<p><strong>框模型重置</strong>：您还可以使用通用选择器将盒子跨元素归一化：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">* { box-sizing: border-box; }</code></pre><div class="contentsignin">登录后复制</div></div>
</li>
<li>
<p><strong>组合重置</strong>：您可以将通用选择器与其他选择器相结合以创建全面的重置。例如，以下重置所有元素的重置样式，包括伪元素：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <code class="css">*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; }</code></pre><div class="contentsignin">登录后复制</div></div>
</li>
<li>
<strong>继承和特异性</strong>：将通用选择器用于重置目的时，请注意CSS继承和特异性。某些属性（例如<code>font-family或color ）可以更好地重置在特定元素上，也可以通过其他方式来避免不必要的替代。
通过以这种方式使用通用选择器，您可以为您的样式创建一个干净的板岩，从而更容易在各种浏览器和设备上始终如一地实现设计。
虽然通用选择器（*）有其用途，但由于潜在的缺点，应避免使用某些情况：
.container * .item不太清楚，计算上比.container .item更昂贵。总而言之，虽然通用选择器是CSS中的强大工具，但应仔细考虑其使用，尤其是在性能敏感或复杂的环境中。更具体的选择器通常是靶向样式和更好性能的更好选择。
以上是CSS中的通用选择器（*）是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！
